41 紧贴底部的页面
2016-09-27 本文已影响13人
ShindouHiro
解决将footer固定在页面底部的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="main"></div>
<footer></footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#main {
height: calc(100vh - 70px);
}
footer {
height: 70px;
background: #000;
}
100vh占据100%可视窗口，利用calc计算，将底部的高度减掉， 保留底部的空间， 这样就可以让底部固定在页面底部了。（注意:calc + - 需要在左右两边都使用空格）
