CSS，获取一个Div来扩展页面的高度

Question

我正在做我的第一个 React-Redux 元素，我正在研究样式。

我遇到的问题是背景颜色。

如果我在包含页面主要内容的 div 上设置背景色，页面底部会留白。

我的解决方案是在我的重置文件中的正文和 html 上设置默认背景颜色。这解决了问题。

但是，我想在不同的页面上使用不同的背景颜色/图像，如果我将 body 和 html 设置为默认颜色，则该颜色将是任何页面上 div 下方的颜色。

如有任何帮助，我们将不胜感激。这又是使用 React 和 Redux，我对这种 Material 是全新的，根据我的理解，所有组件都将嵌套在父元素(在我的例子中为 body)下，因此更改将影响每个页面。那就是说有没有办法让 div 填充页眉和最终页脚元素之间的所有空间？

Answer 1

如果你确定你的主要内容元素需要占页面高度的100%，你可以使用

height:100vh;

这会给元素一个等于 View 高度 100% 的高度。这在当前所有浏览器中都支持，除了 opera mini。

当心父元素上的边距或填充，因为它们可能会使您的容器略微溢出页面 - 看看我如何处理正文中的边距 this example