Html 如何在div之间填充高度？我有3个div 1，一个在上面，一个在底部，一个在中间。顶部和中部分区都有一定的尺寸。有什么方法可以让中间的div填充其他两个div之间的空间吗？_Html_Css

Html 如何在div之间填充高度？我有3个div 1，一个在上面，一个在底部，一个在中间。顶部和中部分区都有一定的尺寸。有什么方法可以让中间的div填充其他两个div之间的空间吗？

html css

Html 如何在div之间填充高度？我有3个div 1，一个在上面，一个在底部，一个在中间。顶部和中部分区都有一定的尺寸。有什么方法可以让中间的div填充其他两个div之间的空间吗？,html,css,Html,Css,对于中间的div使用： height: calc(100% - (XXXpx + XXXpx)); 这里有一个例子： <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; } #global { height: 100vh; } #header { height: 100px; background-color: o

对于中间的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>


*{边距：0；填充：0；}
#全球{高度：100vh；}
#标题{高度：100px；背景色：橙色；}
#内容{高度：计算（100%-（100px+50px））；背景色：灰色；}
#页脚{高度：50px；背景色：绿色；}
埃尼安
拉齐尼亚
夸姆

Global div可能具有您想要的高度

我将使用

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>


正文{高度：100%；边距：0；填充：0；}
.固定{高度：100px；宽度：100%；位置：绝对；左侧：0；}
.top{背景：#f00；top:0；}
.mid{背景：#0f0；高度：计算（100%-200px）；填充顶部：100px；}
.bot{背景：#00f；底部：0；}

试试这个：

div
{
颜色：白色；
位置：绝对位置；
宽度：100%；
}
#顶
{
背景：红色；
高度：100px；
排名：0；
}
#中间的
{
背景：绿色；
底部：100px；
顶部：100px；
}
#底部
{
背景：蓝色；
底部：0；
高度：100px；
}

顶部
中间的
我认为你应该考虑使用FrasBox。

解决方案：

.wrapper，html，body{
身高：100%；
保证金：0；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
调整内容：灵活启动；
对齐项目：拉伸；
对齐内容：拉伸；
身高：100%；
}
#第1行{
背景色：#678678；
高度：50px
}
#第2行{
背景色：#e34e34；
弹性：2；
显示器：flex；
}
#第3行{
背景色：#987987；
高度：66px；
}

顶部
中间的
底部
请发布您在问题中尝试过的代码。您的意思是顶部和底部有固定的高度吗？这是这么多问题的重复。