Question

不确定如何解决这个问题。基本上，我的页面有一个包含在包装器中的标题，导航，正文和页脚，所有这些都包含在正文中（当然）。包装器设置为填充屏幕的60％并居中。标题，导航和页脚将始终具有相同的高度，并且只是在宽度方向上填充包装器。

然而，主要部分具有可变长度的内容（段落，图像，文章，部分等）。如果我在主要部分中有很多内容，则页面会填充，延伸并像往常一样滚动。但是如果我在main中只有一些内容，那么页面就不够长，并且页脚在屏幕的一半左右结束（或者在微小的主要部分之后需要跟随它。）

我想要做的是确保身体和/或包裹物伸展以填充屏幕的高度，即使主要部分不足以迫使它高到那么高。我已经尝试制作主体和包装器height: 100%，但包装器仍然没有延伸。如果我将页脚设置为position: fixed，页脚大小会变形，并且包装边框不会向下延伸。

鉴于这些问题，我认为最好的解决方案是以某种方式增加主要部分的高度，以便它和其他元素总是加起来至少100％，但我无法弄清楚这该怎么做。这让我难以忍受了一个星期，所以任何帮助都会非常感激！

Answer 1

这可能有用。它只是为您的身体标签，包装器和HTML设置样式，以填充其容器的高度。

html, body, #wrapper {
   height: 100%;
}

如果没有HTML / CSS的简化版本，我认为我可以更具体。

- 编辑 -

我用你的JSFiddle分了一个实例。我所做的就是将上面的代码片段添加到CSS中。

Answer 2

正如折衷主义者已经说过的那样。您需要将html和body设置为100％高度。这是必要的，因为wrapper-element继承了父级的高度。因此将包装器设置为100％ - 高度永远不会让它变得更大，因为它是父级。除了Eclecticists的回答，我建议你将包装 min-height 设置为100％，这样一旦超出窗口高度，内容就不会用完容器：

html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
}

调整身高以适应屏幕，即使内容较短？

2 个答案: