您现在的位置：网页制作教程网 >> 网页设计 >> 网页布局排版 >> 文章正文

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

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:15:03

以下是引用片段：
<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

上一页 [1] [2] [3] [4] [5] [6]

我来说两句：

查看评论