CSS - 设置 Div 的大小以填充剩余空间答案

【问题标题】：CSS - Set size of Div to fill remaining spaceCSS - 设置 Div 的大小以填充剩余空间
【发布时间】：2014-06-12 20:13:37
【问题描述】：

我是 CSS 新手，我正在尝试创建模板的准系统结构。

我有一个用于页眉、主要内容和页脚的 div。我的页脚和页眉很好，但我需要主要内容 div 来“填充”页眉和页脚之间的剩余空间。我尝试将 padding-bottom 属性设置为与页脚相同的高度，但它没有关闭与页脚的间隙，它只是将 div 的高度设置为 padding-bottom 值。

我的 HTML

<!DOCTYPE html>
<HTML>
    <HEAD>

        <LINK type="text/css" rel="stylesheet" href="main.css"/> 
        <TITLE>Template</TITLE>

    </HEAD>
    <BODY>
        <div id="container">

            <div class="header"></div>

            <div class="main-content"></div>

            <div class="footer"></div>

        </div>
    </BODY>
</HTML>

还有级联样式表。

#container{

    min-height:100%;
    position:relative;

}

.header{

    border:2px dashed blue;
    height:150px;
    border-radius:5px;
    padding:10px;
}


.main-content{


    border:2px dashed blue;
    border-radius:5px;
    padding:10px;
    padding-bottom:100px;



}

.footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    border:2px dashed blue;
    border-radius:5px;




}

html, body{
   margin:0;
   padding:1px;
   height:100%;
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以将calc() 用作您的.main-content

.main-content {
    border:2px dashed blue;
    border-radius:5px;
    padding:10px;
    height: calc(100% - 300px);    
}

Demo

另外，我在这里和那里做了一些调整，例如，你不再需要padding-bottom，而且，你应该使用height: 100%;，而不是使用min-height: 100%;，并且不要使用大写- 小写标签，保持标签小写的习惯。

【讨论】：

非常感谢您的帮助，我是一名服务器端开发人员，正在努力工作，非常感谢您的建议。