当前位置：首页 → 问答吧 → 关于一个三列布局的问题！

关于一个三列布局的问题！

时间：2010-06-02

来源：互联网

网站布局结构如下：
中间列（subcenter层）内容高度不固定！有可能高于或者低于两边（subleft层）和（subright层）。
现在需要！不管任何时候！（中间列不管高度是高于或者低于两边列）
都需要两边的列层的左右边框（红色）的长度能到达bottom层的上面！也就是四条竖线（红色）的高度！任何时候都是等于 center层的高度！

只要能达到效果！四条竖线高度不管任何时候都等于center的高度！可以改变html结构代码！

小弟想了半天实在想不好的办法！跪求优秀的解决办法！能不用js最好不用JS！谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } #header { background:#333; width:800px; height:50px; margin:0 auto; color:#fff; } #center { background:#f4efe3; width:800px; margin:0 auto; color:#000; overflow:hidden; } #subcenter { float:left; width:500px; height:500px; } #subleft { width:146px; float:left; border-left:1px solid #f00; border-right:1px solid #f00; } #subright { width:146px; float:left; border-left:1px solid #f00; border-right:1px solid #f00; } #bottom { background:#ccc; width:800px; height:30px; margin:0 auto; color:#fff; clear:both; } </style> </head> <body> <div id="header">header</div> <div id="center"> <div id="subleft"> <div class="leftcon"><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p><p>左边的内容的高度</p></div> </div> <div id="subcenter">中间的内容高度不固定</div> <div id="subright"> <div class="rightcon"><p>右边内类容的高度</p><p>右边内类容的高度</p><p>右边内类容的高度</p><p>右边内类容的高度</p><p>右边内类容的高度</p><p>右边内类容的高度</p><p>右边内类容的高度</p></div> </div> </div> <div id="bottom">bottom</div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 feng192 于 2010-6-2 16:29 编辑 ]

作者: feng192 发布时间: 2010-06-02

版主大哥！在不！快来救命啊！急着用呢！