Question

我有以下内容包装设置..

<div class="page_background">
        <div class="page">
             <p>gnjfikgnfik</p>
        </div>
</div>

.page_background {


width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
}

由于某种原因，我的.page div不会覆盖整个页面。我在正确的位置都有关闭div。我以为min-height: 100%;确保它会覆盖页面的整个高度？我也试过bottom: 0;但仍然没有。我怎么能纠正这个？

Answer 1

min-height需要明确指定封闭框的高度。

来自MDN的

min-height文档：

百分比：百分比是根据生成的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则百分比值将被视为0.

解决方案：使用position: absolute定位page元素，然后使用height: 100%使其跨越整个页面。

.page_background {
  width: 100%;
  position: absolute;
  height: 100%;
  ....
}
.page {
  position:absolute;
  width: 85%;
  height: 100%;
  ...
}

请参阅Fiddle

Answer 2

添加＆＃34;职位：绝对＆＃34;在page_background里面

.page_background {
    position:absolute;
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}

Answer 3

百分比高度要求显式声明元素父级的高度 - 例如父级高度：500px或高度：50％。因为您希望它是屏幕视图的100％，所以您必须将元素中的所有父项设置为html（包括），因此将html和body设置为高度100％：

html, body {
height: 100%;
}

如果您要定位新浏览器，则可以在元素上使用height: 100vh。 1vh是视口的1％。在这种情况下，您不必将父项设置为100vh与视口相关，而不是父项。

内容包装不覆盖整个div区域

3 个答案: