1.不能fixed固定,不能固定在浏览器的最下面,当页面足够长时,不用管页脚,他自然就会到最下面了
2.只有当页面主体部分很短时,才把页脚固定在最下面
3.因为不同的显示器分辨率不一样,所以没法设置min-height
<html>
<body >
<%@ include file="header.jsp" %>
<%@ include file="footer.jsp" %>
</body>
</html>
1.不能fixed固定,不能固定在浏览器的最下面,当页面足够长时,不用管页脚,他自然就会到最下面了
2.只有当页面主体部分很短时,才把页脚固定在最下面
3.因为不同的显示器分辨率不一样,所以没法设置min-height
<html>
<body >
<%@ include file="header.jsp" %>
<%@ include file="footer.jsp" %>
</body>
</html>
<style>
*{margin:0;padding:0;}
html,body{height: 100%;}
.box{min-height: 100%;position: relative;overflow:hidden;}
.content{
background: red;height: 1000px;margin-bottom: 50px;
}
.footer{
background: blue;height: 50px;position: absolute;bottom: 0;left: 0;width: 100%;
}
</style>
<div class='box'>
<div class="content"></div>
<div class="footer"></div>
</div>
公共头尾你可以用Vue组件开发,或者模板引擎,第二个问题是前端开发中最经典的问题,叫sticky footer,紧贴底部的页脚,具体参考这篇文章CSS秘密花园: Sticky footers
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
给
body
设置min-height
属性。