2

可能重复：
CSS - 百分比高度

我无法让 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>
4

3 回答 3

3

试试这样的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 周围添加“包装器”，并将“页脚”移出两者。

于 2012-06-29T15:21:50.373 回答
1

您可以绝对定位 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;
}
于 2012-06-29T15:15:49.803 回答
1

我认为一个好主意是摆弄'display：flexbox'来实现那种响应能力。这是一篇关于它的好文章。

于 2012-06-29T15:32:28.050 回答