当前位置：首页 → 问答吧 → div,100%高度,左右分栏,宽度随浏览器伸缩,页脚保持在底部.

div,100%高度,左右分栏,宽度随浏览器伸缩,页脚保持在底部.

时间：2011-08-03

来源：互联网

代码大概如下,现在基本上只能满足一部分要求.
1.100%高度(html,body,wrap都100%高度)
2.左右分栏,宽度伸缩.(sidebar左浮动然后margin-right负值.main内容宽度auto)
3.页脚虽然能保持在底部不过用的是绝对位置.会压到其他的内容.

未解决:虽然左右分栏了,不过现在左边的菜单是用背景图repeat-y做了障眼法.
如果能做到sidebar和main的高度一致最更爽了.

等高手指点.
没有贴已有样式是想看有没有更好的实现方式.

<!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> </head> <body> <div id="wrap"> <div id="header">头部,高度100px</div> <div id="content" class="clearfix"> <div id="sidebar">左侧菜单,宽度160p0x。（这里的高度，最好可以跟右边内容区高度一致。）</div> <div id="main">内容区,宽度随浏览器伸缩</div> </div> <div id="footer">底部，高度54px。保持在浏览器底部。页面高度超过浏览器高度时，需要滚动到底部才能看见。也就是footer不会压在content上。</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 leilay 于 2011-8-3 09:17 编辑 ]

作者: leilay 发布时间: 2011-08-03

宽度可以用100% 左右DIV块同样的高度这个前几天有人发过

作者: vallkiss 发布时间: 2011-08-03