Div高度100％到页脚不工作

Question

我的页脚div位于底部，min-height: 100%父名为#container。这工作得很好，但是我试图为名为height: 100%的{​​{1}}制作div，而我似乎无法得到它。有什么想法吗？

CSS：

#content

HTML：

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;
}

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 */

Answer 2

在#footer中，你不做位置：绝对。

http://jsfiddle.net/W4zZe/

    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 {
    bottom:0;
    width:100%;
    height: 100px;
    width: 70%;
    left: 15%;
    background: #1e5799;
    margin-left: auto;
    margin-right: auto;
}