Xhtml第10天:div自适应高度

即使咱们想在3列构造的结果加一条龙页脚，放版权之类的消息。就遇到必需对齐3列底部的题目。在table构造中，咱们用大表格嵌套小表格的本领，不妨很简单对齐三列；而用div构造，三列独力分别，实质上下各别，就很难对齐。本来咱们实足不妨嵌套div，把三列放进一个div中，就做到了底部对齐。底下是实行例子(白色后台框模仿一个页面)：

#pagebox {padding-right: 20px; padding-left: 20px; background: #fff; padding-bottom: 20px; margin: 0px; width: 600px; padding-top: 20px; font-family: arial,'宋体','新宋体',verdana,sans-serif}#header {border-top-width: 0px; border-left-width: 0px; background: #ccd2de; border-bottom-width: 0px; margin: 0px; width: 580px; height: 60px; border-right-width: 0px}#hmainbox {background: #fff; margin: 0px; width: 580px}#menu {padding-right: 0px; padding-left: 0px; background: #ccd2de; float: right; padding-bottom: 0px; margin: 2px 0px; width: 400px; padding-top: 0px}#content {padding-right: 0px; padding-left: 0px; background: #e0efde; float: right; padding-bottom: 0px; margin: 1px 0px 2px; width: 400px; padding-top: 0px}#sidebar {padding-right: 0px; padding-left: 0px; background: #f2f3f7; float: left; padding-bottom: 0px; margin: 2px 2px 0px 0px; width: 170px; padding-top: 0px}#hfooter {clear: both; padding-right: 0px; padding-left: 0px; background: #ccd2de; padding-bottom: 5px; margin: 0px; width: 580px; padding-top: 5px; height: 40px}

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的背局面作废。)

好了，重要的框架仍旧搭建结束,剩下的处事不过往内里添砖加瓦。