Question

我的页面布局有问题。我觉得答案很简单，我已经做了很多工作来寻找答案和试验，但我似乎无法指出它。

页面需要一个固定高度的页眉和页脚，但需要使用浏览器窗口进行水平调整。在它们之间，有一个'main'div应该水平和垂直扩展，以填充页眉和页脚之间的所有可用空间（但我不能在浏览器窗口中显示滚动条）。 'main'div本身应该有一个固定宽度的左侧边栏和一个'内容'div占用剩余的空间。

我有一张图片可以解释我正在努力解决的问题，但是我没有10个新用户的代表，所以我无法附加图片（由于“垃圾邮件防范机制”）。

我一直在玩弄小提琴：http://jsfiddle.net/pURjN/4/

我正在寻找一些指示和方向。请随意弄乱那个小提琴。

谢谢，
Ĵ

Answer 1

使用绝对定位。好像你不一定需要一个“主”div，但它也不会受伤。

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
}
#sidebar {
    position: absolute;
    top: 75px;
    left: 0;
    bottom: 75px;
    width: 250px;
}
#content {
    position: absolute;
    top: 75px;
    left: 250px;
    right: 0;
    bottom: 75px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
}

http://jsfiddle.net/gilly3/pURjN/7/

如果没有额外的div，它也可以正常工作：http://jsfiddle.net/gilly3/pURjN/8/

需要根据浏览器大小调整内容div（在页眉和页脚div之间）

1 个答案: