解决将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 + - 需要在左右两边都使用空格)