天极网 > 软件频道 > 网页陶吧>推荐：网页中三列自适应高度布局的实现

推荐：网页中三列自适应高度布局的实现

2006-10-23 10:42作者：龙犊整理出处：天极网责任编辑：龙犊

　　高度自适应

以下是引用片段：
　　#container {
　　overflow: hidden;
　　}
　　#container .column {
　　padding-bottom: 20010px; /* X + padding-bottom */
　　margin-bottom: -20000px; /* X */
　　}
　　#footer {
　　position: relative;
　　}

　　这个代码起源于adapted wholesale。

　　遗憾的是现在Opera还不支持#container的overflow，期待版本9。

　　现在IE还不能真正的自适应高度，还要加下面的代码，如果你需要#footer，可再加个DIV(#footer外面)。

以下是引用片段：
<div id="footer-wrapper">
<div id="footer"></div>
</div>

以下是引用片段：
　　* html body {
　　overflow: hidden;
　　}
　　* html #footer-wrapper {
　　float: left;
　　position: relative;
　　width: 100%;
　　padding-bottom: 10010px;
　　margin-bottom: -10000px;
　　background: #fff; /* Same as body
　　background */
　　}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #3: A List Apart</title> <style type="text/css"> /*** The Essential Code ***/ body { min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */ } #container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ } #container .column { position: relative; float: left; } #center { padding: 10px 20px; /* CC padding */ width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -100%; } #footer { clear: both; } /*** IE Fix ***/ * html #left { left: 150px; /* RC fullwidth */ } /*** Equal-height Columns ***/ #container { overflow: hidden; } #container .column { padding-bottom: 1001em; /* X + padding-bottom */ margin-bottom: -1000em; /* X */ } /*** Footer Fix ***/ * html body { /*overflow: hidden;*/ } * html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #FFF; /*** Same as body background ***/ } /*** Just for Looks ***/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </style> </head> <body> <div id="header">This is the header.</div> <div id="container"> <div id="center" class="column"> <h1>This is the main content.</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> </div> <div id="footer-wrapper"> <div id="footer">This is the footer.return to<a href="http://homepage.yesky.com">homepage.yesky.com</a></div> </div> </body> </html>

原文标题：In Search of the Holy Grail如果需要有更详尽的了解，请看原文：http://www.alistapart.com/articles/holygrail

阅读关于网页三列自适应高度布局网页陶吧龙犊的全部文章

热卖推荐：手机　诺基亚　 MP5　电脑包　双卡双待　手机链　 U盘　笔记本电脑

关注此文的读者还看过：

返回网页陶吧首页

共6页。上一页 1 2 3 4 56

软件频道最新更新

热点推荐

IT嘉年华

编辑推荐

软件下载