商业web应用中正确的使用header,container,footer布局页面 有更新!

Published on in 前端 with 589 views and 1 comments

当你百度“如何让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并不绝对显示。

接下来给出 htmlcss 代码进行分析。

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,完成。
Responses
  • haha

    :smile:

    Reply