shang上面就是页面的效果。我不可能把底部的写成固定的position:fixed ;bottom:0;这样的。因为当页面内容多的时候。就一直悬浮在底部怪怪的。肯定是靠页面的内容撑开的。
现在我们可以利用flex布局来写
<div id="container">
<header>HEADER</header>
<section class="main">MAIN</section>
<footer>FOOTER</footer>
</div>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
display: flex;
flex-direction: column;
height: 100%;
}
header{
background: #999;
flex: 0 0 auto;
}
.main{
background: orange;
flex: 1 0 auto;
}
footer{
background: #333;
flex: 0 0 auto;
}