CSS布局中自适应高度的解决方法_网页制作教程

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页制作 >> CSS布局中自适应高度的解决方法	打印友好页面

CSS布局中自适应高度的解决方法

作者：龙犊整理出处：天极网

这是div+css布局中经常会碰到的基础问题，个人觉得采用背景图填充的方法，还是比较简单和切实可行的。最终效果。

CSS源代码:
以下是引用片段：
　　body{
　　background: #EDEDED;
　　font-size: 70%;
　　font-family: Arial, Helvetica, sans-serif;
　　line-height: 130%;
　　color: #666666;
　　margin: 0;
　　padding: 0;
　　text-align: center;
　　}
　　#layout{
　　width: 760px;/*--for ie5.x--*/
　　w\idth: 740px;/*--other--*/
　　margin: 10px auto;
　　border: solid 10px #999999;
　　border-bottom: solid 9px #999999;
　　/*--底部要加个1px的DIV来清除浮动，所以把
　　底边框设为9px--*/
　　background: url(bg.gif) #FFFFFF repeat-y left;
　　/*--背景填充，解决左右栏高度不一致--*/
　　text-align: left;
　　}
　　#sidel{
　　float: left;
　　width: 190px;
　　}
　　#sider{
　　float: right;
　　width: 540px;
　　}
　　pre{
　　padding: 10px;
　　margin: 0;
　　}
　　.clear{
　　background: #999999;
　　clear: both;
　　height: 1px;
　　overflow: hidden;
　　}

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script> <title>DIV+CSS排版中自适应高度的解决方法</title> <style type="text/css">  </style> </head> <body> <div id="layout"><div id="sider"><pre> body{ background: #EDEDED; font-size: 70%; font-family: Arial, Helvetica, sans-serif; line-height: 130%; color: #666666; margin: 0; padding: 0; text-align: center; } #layout{ width: 760px; w\idth: 740px; margin: 10px auto; border: solid 10px #999999; border-bottom: solid 9px #999999; background: url(bg.gif) #FFFFFF repeat-y left; text-align: left; } #sidel{ float: left; width: 190px; } #sider{ float: right; width: 540px; } pre{ padding: 10px; margin: 0; } .clear{ background: #999999; clear: both; height: 1px; overflow: hidden; }</pre></div><div id="sidel"><pre> #sidel{ float: left; width: 190px; } #sider{ float: right; width: 540px; } pre{ padding: 10px; margin: 0; } .clear{ background: #999999; clear: both; height: 1px; overflow: hidden; }</pre></div> <div class="clear"></div> </div> <a href="http://www.butong.net">返回网页特效库</a> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇：网页中三列自适应高度布局的实现

返回列表

下一篇：提高网页的用户体验：字体大小...