最小高度为满屏的界面布局

   在前端界面布局中经常遇到一种场景：就是界面有header和footer的情况，当采用流体布局的时候经常会因为中间的内容部分的内容不足导致界面的footer浮在界面文档的底部，用户体验不好，所以要进行文档最小高度为满屏高度布局设计。

   不考虑ie6/7的情况下，采用绝对布局以及min-height可以实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高度最小满屏布局</title>
</head>
<body>
    <div class="main">
      <div class="header"></div>
      <div class="container">
        这是内容区，内容区的高度可以随着内容的高度而改变，但是不兼容ie6/7
      </div>
      <div class="footer"></div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
   overflow:hidden;
  margin:0;
}
.main{
  position:absolute;
  width:100%;
  min-height:100%;
  top:0;
  
}
.header{
  height:60px;
  background-color:yellow;
}
.container{
  overflow:hidden;
  min-height:200px;
  background-color:#ccc;
  margin-bottom:60px;
}
.footer{
  position:absolute;
  width:100%;
  height:60px;
  bottom:0;
  background-color:green;
}


，在线演示：https://jsbin.com/nixame

说明：

1、在主面板采用绝对布局并甚至最小高度为满屏

2、footer为绝对定位到底部的距离为0

  在满屏满足需求以后，在内容区部分如果要实现左右分布，类似左侧为菜单，右侧为内容区，同时菜单栏要填充满整个左侧，此时可以继续采用绝对布局来满足需求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高度最小满屏布局</title>
</head>
<body>
<div class="main">
  <div class="header"></div>
  <div class="container">
    <div class="left">
      <div class="aside">
        满高菜单栏
      </div>
    </div>
    <div class="right">
      内容区
    </div>
  </div>
  <div class="footer"></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body{
  overflow-x:hidden;
  margin:0;
}
.main{
  position:absolute;
  width:100%;
  min-height:100%;
  top:0;
}
.header{
  height:60px;
  background-color:yellow;
}
.left{
  width:20%;
  background-color:blue;
  float:left;
  height:1px;
}
.aside{
  position:absolute;
  bottom:60px;
  top:60px;
  width:20%;
  background-color:orange;
}
.right{
  overflow:hidden;
  min-height:200px;
  background-color:#ccc;
  margin-bottom:60px;
}
.footer{
  position:absolute;
  width:100%;
  height:60px;
  bottom:0;
  background-color:green;
}

，在线演示：https://output.jsbin.com/qayuxa

说明：

1、采用绝对布局将菜单拉伸

2、需求有限制，要满足不能出现菜单栏的高度大于屏高且内容区高度小于菜单栏高度这个条件。

所以如果在左侧菜单列表过长并大于屏高，且内容区高度不大于屏高的情况下，会产生footer横跨菜单的情况，所以为解决问题，可以左右两部分采用inline-block布局，如此内容区就会拥有两列中的最高的高度，解决侧边栏横跨footer的问题，但是侧边栏不一定会满屏高了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高度最小满屏布局</title>
</head>
<body>
<div class="main">
  <div class="header"></div>
  <div class="container">
    <div class="left">
    </div>
    <div class="right">  
    此种布局可以解决左侧浮动部分的高度过高导致底部footer出现截断浮动部分的问题。
    </div>
  </div>
  <div class="footer"></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body{
  overflow-x:hidden;
}
.main{
  background:red;
  position:absolute;
  width:100%;
  min-height:100%;
  top:0;
}
.header{
  height:60px;
  background-color:yellow;
}
 
.container{
   
}
.left{
  width:20%;
  background-color:blue;
  display:inline-block;
  *display:inline;
  *zoom:1;
  height:1220px;
  margin-bottom:60px;
  vertical-align:top;
 
}
 
.right{
  width:75%;
  height:1320px;
  background-color:#ccc;
  margin-bottom:60px;
  display:inline-block;
  vertical-align:top;
  *display:inline;
  *zoom:1;
}
.footer{
  position:absolute;
  width:100%;
  height:60px;
  bottom:0;
  left:0;
  background-color:green;
}


在线演示地址：http://jsbin.com/xowogu

至此，所以要根据自己的实际需求来选择采用的解决办法，如果要兼容ie6/7，怕是要借助js来实现最小高度为屏高，而后来满足后面的需求。






posted on 2015-07-13 11:34  颜传  阅读(1288)  评论(0)    收藏  举报