1

我遇到了页面布局问题。我觉得答案很简单，我已经做了很多工作来寻找答案和实验，但我似乎无法确定它。

页面需要一个固定高度的页眉和页脚，但可以随浏览器窗口水平调整。在这两者之间，有一个'主' div 应该水平和垂直扩展以填充页眉和页脚之间的所有可用空间（但我不能在浏览器窗口上出现滚动条）。'main' div 本身应该有一个固定宽度的左侧'sidebar' 和一个'content' div 占据剩余空间。

我要附上一张图片来解释我正在努力的方向，但我没有 10 个代表作为新用户，所以我无法附上图片（由于“垃圾邮件预防机制”）。

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

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

谢谢，
J

4

1 回答 1

2

使用绝对定位。似乎您不一定需要“主要” 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/

于 2012-06-05T00:28:20.797 回答