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链接，因此在demo1中你已经在表格之前创建了一个id为"content_border"的新div。

#content_border{
    height: 100%;
}

Answer 3

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

#content_border {height:100%;}

为什么这个CSS不占用整个页面？

3 个答案: