div的高度不是100%

时间:2014-05-03 13:09:15

标签: css html

我想制作一个100%高度的网页。我一直有身高的问题。我现在的身高是100%+ 100px;

我创建了一个高度为100px的标题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;
}

2 个答案:

答案 0 :(得分:1)

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

我已经用容器div包装你的HTML并给它100% - 标题高度,即100px。

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

Working fiddle here.

答案 1 :(得分:1)

你需要一个包装器。

<body>
    <div id="wrapper">

        <div class='top'>
        </div>

        <div class='mid'>
        </div>

        <div class='bot'>
        </div>

    </div>
</body>

* {
    margin: 0;
    padding: 0;
}
body,
#wrapper {
    height: 100%;
}
.top {
    height: 20%;
}
.mid {
    height: 70%;
}
.bot {
    height: 10%;
}