XHTML学习笔记(3)之自适应高度css

#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND:
#ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}

#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF; }

#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px; }

#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de; }

#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}

#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px; }

这个例子的页面主要代码如下：

<div id="header"></div>
<div id="mainbox">
　　<div id="menu"></div>
　　<div id="sidebar"></div>
　　<div id="content"></div>
</div>
<div id="footer"></div>

　　重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。

　　另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。

　　这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)

资料来源：网页设计师

 引用自：http://blog.csdn.net/dzmiao/archive/2004/12/27/231534.aspx