Question

可能重复：
CSS - percentage height

我不能得到3个div的中间div以适应100％的可用空间。

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

我的CSS是：

html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
    background: #F60;
}
#footer {
    height: 75px;
    width: 100%;
    background: #060;
}

中心div实际上是100％，但它不适合可用空间。

它正在做这样的事情：如果屏幕是500px

30px
100% (500px)
30px

我需要的是：

30px
100% (460px)
30px

如果没有使用javascript，这可能吗？

非常感谢

修改：
对不起我的意思是身高我有3个元素，标题，中间和页脚。页眉和页脚有固定的高度，但我希望中间适合所有可用空间

基于其他stackoverflow问题找到另一个解决方案：

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    border: 0;
}
#header
{
    height: 100px;
    background:#C60;
}

#container
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    background:#096;
}

#footer
{
    height: 100px; /*Push must be same height as Footer */
    background:#C60;
}

HTML

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

Answer 1

尝试类似jsfiddle之类的内容。

HTML

<body>
    <div id="wrap">
<div id="container">
    <div id="header">header
    </div>
    <div id="content">qweW
    </div>
</div>
</div>
    <div id="footer">footer
    </div>
</body>

CSS

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    background: #F60;
}
#container {
    width: 100%;
    padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
}
#footer {
    position: relative;
    margin-top: -75px;
    clear:both;
    height: 75px;
    width: 100%;
    background: green;
}

我调整了你的HTML，在“容器”div周围添加了一个“包装器”，并将“页脚”移出两者。

Answer 2

你可以绝对定位div：

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

和

#header {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height: 100px;
    background: #069;
}
#content {
    position:absolute;
    top: 100px;
    bottom: 75px;
    left:0px;
    right:0px;
    background: #F60;
}
#footer {
    position:absolute;
    bottom: 0px;
    height: 75px;
    left:0px;
    right:0px;
    width: 100%;
    background: #060;
}

Answer 3

我认为一个好主意是摆弄'display:flexbox'来达到那种反应。这是一篇关于它的好文章。

中间div在CSS中100％？

3 个答案: