css - div 的高度不是 100%

Question

我想用<div>制作一个网页和 100% 高度。我一直有高度问题。我现在的高度是 100% + 100px；

我创建了一个高度为 100 像素的标题 div。那是我使用的唯一静态高度。在那个 div 下面，我制作了另一个 div，它应该填满页面。但是当我将其设置为 100% 时，它会将 100% 添加到 100px。当我将其设置为自动时，它的高度仅为 +- 150px。这是 HTML

<!-- header -->
<div id="header">
     <div id="logo"></div>
     <div id="menuTop">menutop</div>
</div>
<!-- center -->
    <div id="linkerbalk">
        <div id="login">login naam</div>
        <div id="menuLinks">Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /></div>
    </div>
<!-- footer -->

我使用的 CSS 是这样的:

html,body {
    height:100%
}
body {
    position:relative;
    margin:0;
}
#header {
    width:auto;
    height:100px;
    background-color:#FC3;
    overflow:hidden;
}
#logo {
    background:url(../img/logo.png);
    background-position:center;
    background-repeat:no-repeat;
    background-color:#27c9cb;
    height:100px;
    width:250px;
    float:left;
    overflow:hidden;
}
#menuTop {
    overflow:scroll;
    background-color:#2d2e33;
    height:100px;
    overflow:hidden;
    width:auto;
}
#linkerbalk {
    background-color:#2d2e33;
    height:100%;
    width:250px;
    float:left;
    overflow:auto;
}
#login {
    background-color:#2faaaf;
    height:35px;
    width:auto;
    overflow:hidden;
}
#menuLinks {
    height:auto;
    width:auto;
    overflow: hidden;
}

Answer 1

以下是实现这一目标的方法之一:

我已经用一个容器 div 包裹了你的 HTML，并给它 100% - header 的高度，即 100px。

.container{
    height:calc(100% - 100px)
}

Working fiddle here.