为什么这个 CSS 没有占据整个页面？答案

【问题标题】：Why this CSS is not occupying the whole page?为什么这个 CSS 没有占据整个页面？
【发布时间】：2015-04-08 19:00:45
【问题描述】：

我使用另一个页面创建了这个 CSS 页面演示 http://jsfiddle.net/a3210pea/ http://jsfiddle.net/XGhP8/71/

第二页占据了整个页面，但我创建的页面没有占据整个页面。

我的 CSS 是这样的

 html, body {
     min-height:100%;
     padding:0;
     margin:0;
}
#wrapper {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.middle {
    height:100%;
}
.bottom {
    background-color:blue;
}
.top {
    background-color: white;
}
.left {
    width:100px;
    background:red;
    height:100%;
}
.right {
    background:orange;
    height:100%;
}

.top.row {
   height : 6%;
   width : 100%;
   background-color : pink;
}
.row > .cell{
  width : 100%;
}
.cell > #logo {
  width : 15%;
  float : left;
}
.cell > #heading {
   width : 84%;
   text-align : center;
}
.banner {
    font-weight: bold;
    font-size: large;
    color: black;
    font-family: sans-serif;
}
#content_border {
   margin : 0.3em;
   border-style : solid;
   border-width : 2px;
   border-color : black;
}
img {
  max-width : 100%;
  height : auto;
}
.text {
   font-size: 2.5vw;
}

我用作基础的 CSS 是这样的：-

    html, body {
    min-height:100%;
    padding:0;
    margin:0;
}
#wrapper {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.middle {
    background-color:green;
    height:100%;
}
.bottom {
    background-color:blue;
}
.top {
    background-color:pink;
}
.left {
    width:100px;
    background:red;
    height:100%;
}
.right {
    background:orange;
    height:100%;
}

我做错了什么？

【问题讨论】：

标签： css layout

【解决方案1】：

你试过设置#content_border的高度吗？

#content_border{
    height:100%;
}

【讨论】：

我承认我没有尝试，但你怎么会认为我应该只尝试那个？我的意思是这行得通，但是如何确定这是我的改编中缺少的部分。
这不是唯一的解决方案。我刚刚注意到您的wrapper ID 的高度实际上设置为 100%，但是由于您添加了另一个 ID 为 content_border 的 div 元素，该元素不会占用您的 body 的高度。
这里可以应用哪些其他可能的解决方案？请详细说明
除了我的解决方案，你还可以完全删除你用id="content_border"添加的div，然后将你的css的#content_border部分更改为#wrapper，或者复制你设置的CSS对于 #content_border 到您的 #wrapper CSS 块。像这样：jsfiddle.net/a3210pea/4

【解决方案2】：

根据您的问题，您已经通过引用 demo2 链接创建了 demo1，因此在 demo1 中，您在 table 之前创建了 ID 为 "content_border" 的新 div。

#content_border{
    height: 100%;
}

【讨论】：

为什么增加内容边框的高度如此重要？

【解决方案3】：

您必须为每个父容器提供height:100%，否则父容器将采用默认高度值Auto，其子容器将跟随。

#content_border {height:100%;}

【讨论】：

为什么为内容边框添加高度如此重要？我的意思是这行得通，但是如何确定这是我的改编中缺少的部分。
所以在这种情况下，我没有使用 height:100% 并且内容不多，因此 content_border 正在应用 height:auto 并缩小
绝对......你明白了