当main的高度足够长的时候,紧跟在<\main>后面的元素<\footer>会跟在其后面;css
当<\main>元素比较短的时候(好比小于屏幕的高度),咱们指望这个<\footer>元素可以“粘连”在屏幕的底部。 html
三个组成部分:wrap容器,main内容,footer脚部bash
//html结构
<body>
<div id="wrap">
<div id="main">
main<br/>
main<br/>
</div>
</div>
<div id="footer"></div>
</body>
//css样式
html, body {
height: 100%;
margin: 0;
}
#wrap{
width: 100%;
min-height: 100%;
}
/*内容区须要让出一部分区域,防止内容被盖住*/
#main{
padding-bottom: 30px;
}
//wrap包裹内容的最小高度是100%,此时将footer的部分经过margin-top拉上去30px。
#footer{
width: 100%;
height: 30px;
background-color: yellow;
margin-top: -30px;
}
复制代码
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
//css样式
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
复制代码
//html结构
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
//css样式
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
height: 50px;
background-color: red;
}
复制代码