关闭

第10天:自适应高度

249人阅读 评论(0) 收藏 举报

如果我想在3列布局的最后加一行脚,放版的信息。就遇到必须对齐3列底部的问题。在table布局中,我用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其完全可以嵌套div,把三列放一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模一个)

Body

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

里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar#content

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

里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; },背景色用的是#main的背景色

里是#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的背景色失效。)

好了,主要的框架已搭建完,剩下的工作只是往里面添加瓦。如果你希望尝试其他布局,推荐看看以下文章:

Tips:[onestab "P.I.E"专题] 有更多精彩介,推荐去看看

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:373954次
    • 积分:4032
    • 等级:
    • 排名:第8005名
    • 原创:45篇
    • 转载:171篇
    • 译文:0篇
    • 评论:24条
    最新评论