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

Question

我使用另一个页面创建了这个 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%;
}

我犯了什么错误？

Answer 1

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

#content_border{
    height:100%;
}

Answer 2

根据您的问题，您创建了 demo1 并引用了 demo2 link，因此在 demo1 中，您在 table 之前创建了 ID 为 "content_border" 的新 div。

#content_border{
    height: 100%;
}

Answer 3

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

#content_border {height:100%;}

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

Why this CSS is not occupying the whole page?

css

layout