1

在过去的一天半里，我一直在做这件事。因此，任何帮助将不胜感激。

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

http://jsfiddle.net/wU2Hd/

再次，任何帮助或朝着正确方向推动将不胜感激，这一直让我陷入困境。

4

4 回答 4

1

这并非不可能。看看我从你那里分叉出来的这个JSFiddle 。

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

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

然后我从 中删除了heightandwidth声明.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 文本来显示效果。如果将其更改为更少的文本，滚动条将完全消失。

于 2012-08-21T21:48:26.500 回答
0

问题是你正在设置

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

这意味着 body 填充以适合窗口，然后 shell-content 扩展以填充该空间（其直接父级的确切大小），但被 shell-top-wrapper 取代，因此它溢出。您应该决定外壳顶部包装器的相对高度，或者动态更改外壳内容的高度（使用 javascript）。

于 2012-08-21T21:28:59.683 回答
0

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

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

干杯!

辛西娅

于 2012-08-21T21:33:27.600 回答
0

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

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

于 2012-08-21T22:40:17.120 回答