如图,html网站所有页面都会引入头部跟脚部,当页面长度很短时,如何让脚部固定到最下面?

1.不能fixed固定,不能固定在浏览器的最下面,当页面足够长时,不用管页脚,他自然就会到最下面了
2.只有当页面主体部分很短时,才把页脚固定在最下面
3.因为不同的显示器分辨率不一样,所以没法设置min-height

<html>
  <body >
  <%@ include file="header.jsp" %>
  <%@ include file="footer.jsp" %>
  
  </body>
 
</html>

clipboard.png

阅读 4.8k
8 个回答

body设置min-height属性。

 <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>

通过js判断滚动条的大小;当大于0时,正常在文档流中,当等于0时,给脚部给个固定定位就可以。

新手上路,请多包涵

给footer设置绝对定位或者fixed定位

题主怎么理解这一句?麻烦解释下。。
【3.因为不同的显示器分辨率不一样,所以没法设置min-height】

公共头尾你可以用Vue组件开发,或者模板引擎,第二个问题是前端开发中最经典的问题,叫sticky footer,紧贴底部的页脚,具体参考这篇文章CSS秘密花园: Sticky footers

html,body{min-height:100%;}
footer{height:50px;margin-top:-50px;}

这样就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题