Div高度的CSS问题

Question

所以这是我的代码：

#logo {
position:fixed;
color: white;
width: 100%;
padding: 5px;
left:0px;
top:0px;
height:50px;
width:100%;
background:#ffffff;
z-index: 1;
}

#page-container {
margin: auto;
width: 960px;
height: 100%!important;
background: #ffffff;
border-style: solid;
border-color: red;

}

html, body {

padding: 0;
}

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #000000;
background-color: #eef3f7;
}

#footer {
position:fixed!important;
position:absolute;
color: white;
clear: both;
width: 100%;
padding: 0;
left:0px;
bottom:0px;
height:30px;
background:#272695;
text-align:center;
}

我希望能够设置页面容器的高度，以便页脚完全覆盖它。我得到的问题是：

我想要的是让我的页面内容规则覆盖整个顶部和底部而不重叠。我正在寻找类似的东西：

老实说，我已经尝试了一切我不知道问题是什么。

Answer 1

将此添加到您的CSS。

body, html {
   height: 100%;
}

CSS height属性相对于它的父级，而height的默认值为auto。因此，要使您的#page-container为100％，您必须设置父高度。