2011-04-20 10:37:29| 分类: 计算机与 Interne | 标签: |举报 |字号大中小 订阅
此例子与前面的例子的区别在于当正文的高度不统一时,怎么办,这也是页面DIV布局时经常碰到的格式问题。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px; line-height:30px}
#mainContent { }
#sidebar { float:right; width:200px; background:#9ff; margin-bottom:5px;}
#content { float:left; width:695px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
<div id="container">
<div id="header">这是头部</div>
<div class="clearfloat"></div>
<div id="menu">这是导航</div>
<div class="clearfloat"></div>
<div id="mainContent">
<div id="sidebar">这是侧边栏</div>
<div id="content">2列右窄左宽、高度自适应+头部+导航+尾部</div>
</div>
<div class="clearfloat"></div>
<div id="footer">这是尾部</div>
</div>
效果下图显示:点击看大图
本例中的关键是<div class="clearfloat"></div>。这句话是清除浮动用的,因为我们在header和menu内设计时都可能涉及到浮动,还有sidebar栏和content,本身已经浮动了,这样如果content的高度没有sidebar高时,footer会浮动到sidebar右侧,造成整个页面错乱,采用这种方式可以有效避免错乱。
另外,sidebar和content分别采用左浮动和右浮动的方式,当然也可以采用自适应宽度,将“sidebar”和“content”按显示的次序摆放, <div id="content">2列右窄左宽、高度自适应+头部+导航+尾部 </div> <div id="sidebar">这是侧边栏</div>。将sidebar的css修改为#sidebar { float:left; width:200px; background:#9ff; margin-bottom:5px;margin-left:5px;}。
部分代码例子由“标准之路www.aa25.cn”提供,感谢!
评论