要求

此博客就是使用此布局方法的,在内容区有空时,底部 footer 在窗口底部,填满时自动被挤下去

参考饿了么的商店详情,文字少时,footer 在详情底下,多时在页面底部,文字超出页面时,文字隐藏在 footer 底下,往下拉文字 footer 不变,文字往上升

实现方法

  1. html,body{height: 100%;}
  2. #wrap{min-height: 100%;overflow: hidden;}
  3. #footer{height: 50px;margin-top: -50px;}
  4. #wrap .main{padding-bottom:50px ;}
<div id="wrap">
  <div class="main">
    main <br />
    main <br />
    main <br />
  </div>
</div>
<div id="footer">
  footer
</div>
1
2
3
4
5
6
7
8
9
10

TOC