仿照google maps两列式布局
要求: fiexed header and footer,左侧栏fiexed width, 右边内容自动fill,左侧栏和右边内容栏等高(无论有无内容)。
可以采用绝对定位布局实现:代码如下:
body{
padding: 0;
}
* {
padding:0;
margin:0;
}
#header{
background-color:#ccc;
height: 50px;
width: 100%;
}
#wrapper{
position: absolute;
width: 100%;
top: 50px;
bottom: 50px;
}
#navigation{
background-color:#eee;
position: absolute;
width: 250px;
height: 100%;
overflow:auto;
}
#content{
background-color:#999;
padding-left:250px;
height:100%;
overflow: auto;
}
#footer{
background-color:#111;
position: absolute;
height: 50px;
width: 100%;
bottom:0;
}
HTML文档结构如下:
<body>
<div id="header"> </div>
<div id="wrapper">
<div id="navigation"> </div>
<div id="content"> </div>
</div>
<divid="footer"> </div>
结果如下: