高度自适应

发表于   |   分类于

在实习时的一个任务：参照某个后台管理系统编写页面，其中“高度自适应”让我有点猝不及防，要怎么实现呢？这个功能挺实用的，很多博客都是使用这种布局，就比如现在用的next的Pisces排版。

html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="top">顶部</div>
<div id="main">
    <div class="sidebar">我在左边</div>
    <div class="content row">
        我在正文<br>
        我在正文<br>
        我在正文<br>
        我在正文<br>
        我在正文<br>
        我在正文<br>
        我在正文<br>
    </div>
</div>
<div id="footer">底部</div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{
	margin:0;
	padding:0;}
#top{
	background:#dcdcdc;
	height:30px;}
#main{
	overflow:hidden;}
.sidebar{
	float:left;
	width:150px;
	height:50px;
	background:pink;}
.content{
	background:orange;
	overflow:hidden;
	_float:left;}
.row{
	margin-bottom:-10000px;
	padding-bottom:10000px;}
#footer{
	clear:both;
	height:30px;
	background:#eeeeee;}

我们来看主要实现，首先主要区域#main和内容区域.content的overflow要设置成hidden，然后为要高度自适应的块添加row类，这是最关键的设置

1
2
margin-bottom:-10000px;
padding-bottom:10000px;

不得不说，margin负值太酷了。
这次实现的左侧高度固定，右侧高度自适应，如果要都是高度自适应，就都添加上述代码。
最后footer要记得clear:both，结束。