Question

我是CSS和im tryig的新手，用于创建模板的准系统结构。

我有一个div标题，主要内容＆amp;页脚。我的页脚＆amp;标题很好，但我需要主要内容div到＆＃34;填充＆＃34;标题和之间的剩余空间页脚。我已经尝试将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

您可以对.main-content

使用calc()

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

Demo

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

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

1 个答案: