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

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

来源：作者：日期：2006-10-23

【聚杰网CSS/HTML】CSS布局中自适应高度的解决方法

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

　　CSS源代码:

<!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.jztop.com/web/">返回网页陶吧</a></body></html>

以下相关文章您是否也应该阅读一下

css布局中的居中问题

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

CSS布局入门

CSSVault推荐的130个CSS布局站点

DIV+CSS布局实例:各种2栏3栏布局实例(附下载)

CSS布局中最小高度（min-height）的妙用

div+css布局技术漫谈

DIV+CSS布局实例:各种2栏3栏布局实例(附下载)网页陶吧DIV+CSS布局

div＋css布局

div+css布局技术漫谈

上一篇：如何使用CSS来进行网页排版