Question

过去一天半我一直在这里工作。所以任何帮助都将不胜感激。

总体布局有顶栏和侧栏，位置固定。我希望内容容器在没有滚动条的情况下填充页面的其余部分，除非由于内容而需要。我不确定是否可以纯粹用CSS做，或者我是否需要修改我的html结构。我在下面张贴了一个小提琴，以展示最简单的例子。

http://jsfiddle.net/wU2Hd/

再一次，任何帮助或推动正确的方向将非常感激，这已经让我陷入了困境。

Answer 1

这不是不可能的。看看我从你们那里分发的JSFiddle。

我不需要更改HTML结构，但是对CSS进行了一些重要更改。

首先，我从height: 100%;删除了html, body。这迫使滚动条出现。

然后我从height删除了width和.content声明，并给出#shell-content绝对定位：

#shell-content {
    background: #FFFFFF;
    position:absolute;
    left: 100px;
    top: 86px;
    bottom: 0px;
    right: 0px;
    overflow-y: auto;
}

left和top是基于您为标题指定的显式高度以及您为菜单指定的显式宽度的值。 overflow-y: auto告诉它只显示滚动条，如果内容超出其可用空间，则不会显示。

JSFiddle有一些疯狂的lorem ipsum文本来显示效果。如果将其更改为较少的文本，滚动条将完全消失。

Answer 2

问题在于您正在设置

#shell-content{
    height:100%
}
body{
    height:100%
}

这意味着正文填充以适应窗口，然后shell-content扩展以填充该空间（其直接父级的EXACT大小），但是被shell-top-wrapper取代，因此它会溢出。你应该决定shell顶部包装器的相对高度，或者动态地改变shell-content的高度（使用javascript）。

Answer 3

这是你的小提琴的起飞：http://jsfiddle.net/eeMz4/。您将看到内容区域中的大图像，它会滚动。如果您将图像显示为OUT并将其替换为文本或小于的可用空间，则滚动条会消失。

诀窍是将overflow:auto添加到#hell-content。

干杯！

辛西娅

Answer 4

我做了一些小改动：http://jsfiddle.net/wU2Hd/5/
- 从内容中删除高度
- 从内容壳中移除高度
- 将身体背景设置为白色
- 将侧边栏背景设置为灰色

这实际上不会拉伸内容，但它会像它一样。当内容变得比视口大时，滚动条将自动出现。

如果不添加滚动条，CSS无法获取内容容器来填充页面的其余部分

4 个答案: