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

[编辑：百家电脑学院] [返回学院首页] [返回上一页] []

·上一篇：css模拟title和alt的提示效果 · 下一篇：创建自定义代码片段提高CSS布局开发效率

网站建设 > CSS/HTML

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

[2007-5-24 15:44:11] [来源: 百家电脑学院] [我要投稿]

·CSS布局中自适应高度的解决方法 | 相关文章·

·百家学院 | 最新评论·