html - Div 高度 100% 到页脚不起作用

Question

我有一个位于底部的页脚 div，其父 min-height: 100% 名为 #container。效果很好，但我正在尝试为名为 #content 的 div 设置 height: 100%，但我似乎做不到得到它。有什么想法吗？

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
   background: rgb(226,226,226);
}
#container {
   min-height:100%;
   position:relative;
}
#header {
    padding:10px;
    height: 165px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    background: rgb(142,0,0);
}
#content {
    padding:10px;
    padding-bottom:100px;
    width:70%;
    left: 15%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background: rgb(252,252,252);
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height: 100px;
    width: 70%;
    left: 15%;
    background: #1e5799;
}

HTML:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

Answer 1

Demo Fiddle

添加新规则:

#header, #footer, #content{
    box-sizing:border-box;
}

然后将以下内容添加到您的 #content 规则中，同时删除 height:100%:

position:absolute;
bottom:100px; /* <--height of footer */
top:165px; /* <--height of header */