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

Question

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

Answer 1

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

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

演示

此外，我已经在这里和那里调整了一些东西，例如，你不再需要padding-bottom ，而不是使用min-height: 100%; 你应该使用height: 100%; ，并且不要使用大写 - 小写标签，养成只用小写写标签的习惯。

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

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-04-27 09:17:55

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-04-27 09:17:55

解决方案1
5 已采纳 2014-04-27 09:17:55