div 的高度不是 100%
[英]height of div is not 100%
問題描述
我想制作一個帶有<div>和 100% 高度的網頁。 我一直有身高問題。 我現在的高度為 100% + 100px；
我創建了一個高度為 100px 的標題 div。 這是我使用的唯一靜態高度。 在那個 div 下面我做了另一個 div 來填充頁面。 但是當我將其設置為 100% 時，它會將 100% 添加到 100px。 當我將其設置為 auto 時，它的高度僅為 +- 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 個解決方案
解決方案1
1 已采納 2014-05-03 13:16:34
以下是實現這一目標的方法之一：
我已經用容器 div 包裹了你的 HTML，並給了它 100% - 標題的高度，即 100px。
.container{
height:calc(100% - 100px)
}
解決方案2
1 2014-05-03 13:20:38
你需要一個包裝器。
<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%;
}
div高度100％
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.