Bruce Chen's Blog

quick notes

0%

上下高度固定，中间自适应，且可以滚动

发表于 更新于 分类于

html 布局三部分

1
2
3
4
5
6
7
<div class="wrap">
      <div class="header">header</div>
      <div class="main">
       弹性滚动区域
      </div>
      <div class="footer">footer</div>
</div>

css：

flex 布局方式

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
*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.wrap{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    width:100%;
    height:100%;
}
.header,.footer{
    height:40px;
    line-height:40px;
    text-align: center;
    background-color:#D8D8D8;
}
.main{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    width:100%;
    padding:10px;
    box-sizing: border-box;
}

absolute 布局方式：

1
2
3
4
5
6
7
*{ padding:0; margin:0; }
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}