CSS - 100% Height with Header and Footer

7ajki6be 于 12个月前发布在其他

关注(0)|答案(3)|浏览(83)

我试图设计一个页面的页眉，一个主要的div，延伸到100%的垂直景观（减去页眉和页脚）和页脚。就像这个pic：

我可以让header和main div工作。像这样：

<div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

使用CSS：

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}

.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

因此，主div从顶部开始40px以考虑页眉，然后从底部停止40px以考虑页脚。这很好用，但是我不能让页脚div显示在主div下面。现在使用position: relative的方式是将页脚放在主div的顶部。如果我使用position:absolute，它会把它放在主div下面。
我确信我只是做错了，因为CSS不是我的事情。
这方面的任何帮助将是伟大的。
谢谢

css

来源：https://stackoverflow.com/questions/17054158/css-100-height-with-header-and-footer

3条答案

按热度按时间

wfypjpf41#

使用CSS3Flexbox：

/*QuickReset*/ * { margin: 0; box-sizing: border-box; }

body {  /* or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex: 1;
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

赞(0）回复(0）举报 12个月前

dl5txlt92#

使用css calc（）函数。

使用此方法，您不必定义元素的位置

这里是一个demo

联系我们

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

css：

html, body { 
    height: 100%
}

body {
    color: #FFF;
    padding: 0;
    margin: 0;
}

header { 
    background-color: #000;
    height: 100px;    
}

main { 
    background-color: #AAA;
    height: calc(100% - 150px);    
}

footer { 
    background-color: #000;
    height: 50px;    
}

赞(0）回复(0）举报 12个月前

vbkedwbf3#

这里有一个简单的方法。试试这个jsfiddle：http://jsfiddle.net/PejHr/
HTML：

<div id="top"></div>
<div id="main">
    <div id="inner"></div>
</div>
<div id="bottom"></div>

CSS：

#main {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 50px 0px
}
#inner {
    width: 100%;
    height: 100%;
    background: #f0f;
}

#top, #bottom {
    width: 100%;
    height: 50px;
    background: #333;
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottom {
    bottom: 0px;
}

赞(0）回复(0）举报 12个月前

我来回答

CSS - 100% Height with Header and Footer

3条答案

使用css calc（）函数。

这里是一个demo

相关问题

热门标签

最新问答