Question

我有3个div 1一个在顶部，一个在底部，一个在中间。顶部和中间div都有一定的尺寸。有没有什么方法可以让中间div填补其他两个div之间的空间？

Answer 1

对于中间div使用：

height: calc(100% - (XXXpx + XXXpx));

这里有一个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        #global { height: 100vh; }
        #header { height: 100px; background-color: orange; }
        #content { height: calc(100% - (100px + 50px)); background-color: gray; }
        #footer { height: 50px; background-color: green;  }
    </style>
</head>
<body>
    <div id="global">
        <div id="header">
            Aenean
        </div>
        <div id="content">
            lacinia
        </div>
        <div id="footer">
            quam
        </div>
    </div>
</body>
</html>

全局div可以根据需要设置高度

Answer 2

我会使用calc()，这只适用于css3浏览器。以下示例适用于我：

<style type="text/css">
body{height:100%; margin:0; padding:0;}
.fixed{height:100px; width:100%; position:absolute; left:0;}
.top{background:#f00; top:0;}
.mid{background:#0f0; height:calc(100% - 200px); padding-top:100px;}
.bot{background:#00f; bottom:0;}    
</style>

<div class="fixed top"></div>
<div class="mid"></div>
<div class="fixed bot"></div>

Answer 3

试试这个：

＆＃13;

div
{
    color: white;
    position: absolute;
    width: 100%;
}

#top
{
    background: red;
    height: 100px;
    top: 0;
}

#middle
{
    background: green;
    bottom: 100px;
    top: 100px;
}

#bottom
{
    background: blue;
    bottom: 0;
    height: 100px;
}

＆＃13;

<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>

＆＃13;

JSFiddle

Answer 4

我认为你应该考虑使用flexbox。

JSFIDDLE Demo

解决方案：

＆＃13;

.wrapper, html, body {
    height:100%;
    margin:0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
}

#row1 {
    background-color: #678678;
    height: 50px
}

#row2 {
    background-color: #e34e34;
    flex:2;
    display: flex;
}

#row3 {
    background-color: #987987;
    height: 66px;
}

＆＃13;

<div class="wrapper">
    <div id="row1">top</div>
    <div id="row2">middle</div>
    <div id="row3">bottom</div>
</div>

＆＃13;

如何在div之间填充高度？

4 个答案: