0%

商业web应用中正确的使用header，container，footer布局页面

发表于

当你百度“如何让Div居于页面底部”，相信很多人给你的答案都是：

position:fixed;bottom:0

或者

body{
 position:relative
}
.footer{
position:absolute;bottom:0
}

然而这种代码导致的结果是，当一个页面高度超出屏幕高度时，底部永远显示在用户界面的下方，但我们想要的结果往往是当用户下拉到页面底部时，才显示footer的Div。
所以lm在这里想要给大家介绍一下，我们公司经常使用的header,container,footer页面布局方式

页面结构

首先给一张样图：
很简单的header,container和footer结构。

f0cff5b060814dadb72c5c7fafba32f4-upload.jpg

页面特点

  • header永远居于页面顶部
  • footer永远居于页面底部
  • 当页面高度超出显示屏幕高度时，footer与header并不绝对显示。

接下来给出 html 和 css 代码进行分析。

html:

<div class="wrapper">
    <div class="header">
        头内容...
    </div>
    <div class="container">
        中间的container内容...
   </div>
</div>
<div class="footer">
    最下面的footer内容
</div>

less:

html, body {
  height: 100%;
  font-family: 'Microsoft YaHei';
  background-color: #f4f4f4;
  overflow: scroll;

}

@footer-height: 200px;
.wrapper {
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -@footer-height;
  padding: 0 0 @footer-height;
}

.header {
  background-image: url('../images/background-image.png');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  color: #fff;

}

.space {
  margin-bottom: @to-footer-margin;
}

@footer-font-color: #ccc;
.footer {
  width:100%;
  background-color: #272823;
  bottom: 0px;
  height:@footer-height;
  margin-top:-200px;
  padding-top:50px;
  color: @footer-font-color;
  border-top:solid 1px @foot-border-color;
}

代码分析

  • wrapper这个div包裹了整个页面，而整个页面body的最小高度被设置为100%，所以无论如何，wrapper占据的高度也是100%
  • footer放在wrapper之后，这里定义了footer的高度为200px，所以毫无疑问footer在最底部以下200px
  • 对footer的margin-top设置为-200px，完成。