CSS – 带页眉和页脚的100%高度

前端之家收集整理的这篇文章主要介绍了CSS – 带页眉和页脚的100%高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图设计一个页面,一个标题,一个主要的div可以延伸到垂直景观的100%(减去页眉和页脚)和页脚.喜欢这张照片:

我可以让头和主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下方.现在的位置是:相对它将页脚放在主div上.如果我使用position:absolute将它放在主div下面.

我相信我只是做错了,因为CSS不是我的事情.

对此的任何帮助将是巨大的.

谢谢

解决方法

使用flexBox
*{ margin:0; Box-sizing: border-Box; }/* Quick reset */

body { /* or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

猜你在找的CSS相关文章