Question

我在这里有这个图片，只是一个简单的bootstrap网站。

下面是代码。我已经厌倦了100％的高度你可以看到，但它不起作用，我想要黑色背景是屏幕的全高。

<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
  <p style="color:#333; padding-top:20%; font-size:80px">Text</p>

</div>

Answer 1

在css中：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

确保你的div不是另一个div的孩子

Answer 2

为了使百分比高度起作用，需要在父元素上设置高度。如果父级的高度是百分比，那么它将要求它的父级也设置一个高度。这就是为什么简单地应用html, body { height: 100%; }可能/不起作用的原因 - 您的元素可能不是<body>的子元素，因此会破坏链。

例如，不起作用，链断了：

<html class="percentage-height-set">
<body class="percentage-height-set">
    <div class="no-height-set">
        <div class="no-height-set">
            <div class="percentage-height-set"></div>
        </div>
    </div>
</body>
</html>

作品，链条是完整的：

<html class="percentage-height-set">
<body class="percentage-height-set">
    <div class="percentage-height-set"></div>
</body>
</html>

由于百分比高度需要在其父元素上设置高度，因此数学运算可能如下所示：

[parent height] * [percentage height of child] = [pixel height of child]

你正在做什么：

?? * .05 = ??

父级设置高度：

500px * .05 = 25px

Css不是页面的全高

2 个答案: