css实现左右等高布局

发表于 | 分类于

常用的几种两列等高布局，任何一边高度自适应，另一边同时自适应相同高度。

在后台管理系统中这种布局比较常见

html布局相同

1
2
3
4
<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
</div>

主要有以下几种方式：

flex布局

优点不用说了，简单快速

缺点的话就是兼容性不好，flex属于css3的属性

1
2
3
4
5
6
7
8
9
10
11
.container{
  display:flex;
}
.left{
  width: 200px;
  background:red;
}
.right{
  flex:1;
  background:green;
}

table实现

优点同上，简单，兼容性比flex好，支持ie8及以上

缺点：ie6/7不支持

1
2
3
4
5
6
7
8
9
10
11
12
.container{
  display:table;
}
.left{
  width: 200px;
  background:red;
  display:table-cell;
}
.right{
  background:green;
  display:table-cell;
}

通过margin/padding

优点：兼容性好，ie都支持

缺点：实现稍微有点复杂，代码多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container{
  overflow:hidden; 
  padding:0; 
  padding-left:180px;
}
.left,.right{
  height:auto; 
  margin-bottom:-10000px; 
  padding-bottom:10000px;
}
.left{
  display:inline; 
  float:left; 
  width:180px; 
  margin-left:-180px; 
  background: #0CF;
}
.right{
  float:left; 
  width:100%; 
  background: #FC6;
  height:600px;
}
显示 Gitment 评论