CSS不是页面的完整高度答案

【问题标题】：Css not full height of pageCSS不是页面的完整高度
【发布时间】：2015-10-20 03:25:35
【问题描述】：

我这里有这张图片，只是一个简单的引导网站。

这是它的代码。如您所见，我已经厌倦了 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>

【问题讨论】：

你肯定会被标记为重复问题，因为我每天至少看到一次这个问题，但简单的答案，你还必须将 body 和 html 元素设置为 100% 高度
将正文高度和 html 高度设置为 100% 无效:(
确定是jsfiddle.net/yh5ohsxd 如果不是，那么您的代码中没有包含更多的父元素。
div stretch 100% page height regardless of content的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

为了使百分比高度起作用，需要在父元素上设置一个高度。如果父级的高度是一个百分比，那么它将要求它的父级也设置一个高度。这就是为什么简单地应用 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

【讨论】：

【解决方案2】：

在css中：

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

确保您的 div 不是另一个 div 的子级

【讨论】：