需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端
这里提供三种解决方法,有两种的思路是一样的,结构也是一样的
第一种
html
<div class="wrap">
<div class="main">
</div>
</div>
<div class="footer">
<h1>页面高度不满,底部固定</h1>
</div>
css
/*第一种方法*/
* { margin:0; padding:0; }
html, body, .wrap { height:100%; }
.wrap {
height:auto;
min-height:100%;
_height:100%;
background:#CCC;
}
.main { padding-bottom:80px; }
.footer {
position:relative;
height:80px;
line-height: 80px;
margin-top:-80px;
background:#333;
color:#fff;
font-size:16px;
text-align:center;
}
效果图就不看了,自己复制下来看就行了
第二种 flex布局
html
<body class="wapper">
<header>头部</header>
<main class="main-content">
<p>实现</p>
</main>
<footer>底部</footer>
</body>
css
*{margin:0;padding:0}
.wapper {
display: flex;
display: -webkit-flex; /* Safari */
min-height: 100vh;
flex-direction: column;
}
.main-content {
flex: 1;
}
header,footer{
height:80px;
background:gray;
}
p{
padding:80px 0;
text-align: center;
}
刚好以前也碰到过这种需求,但是当时也没考虑很多,今天又被人问了一次这个东西,所以就了解一下咯