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

Question

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

3

我对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%;
}

- Derek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

你可以在你的.main-content中使用calc()。

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

演示

此外，我对一些细节进行了微调。例如，您不再需要使用padding-bottom，而应该使用height: 100%;代替min-height:100%;同时，请勿使用大写字母标签，保持只使用小写字母标签的习惯。