Fork me on GitHub

左边固定宽度，右边自适应的几种实现方案

发表于 | 分类于 | 阅读次数:

左边固定宽度，右边自适应的几种实现方案

html结构都如下

1
2
3
4
<div class="wrapper">
    <div class="left">22</div>
    <div class="right">11</div>
</div>

css为了方便去除了margin和padding

1
2
3
4
* {
	margin: 0;
	padding: 0;
}

1、双inline-block实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrapper {
    width: 100vw;
    height: 100vh;
    font-size: 0;  /*去除空格影响*/
    box-sizing: border-box;
}
.wrapper div {
    display: inline-block;
    box-sizing: border-box;
    height: 100vh;
}
.left {
    width: 120px;
    background: red;
}
.right {
    width: calc(100% - 120px);
    background: blue;
}

2、双float实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper {
    width: 100vw;
    height: 100vh;
}
.wrapper div {
    float: left;
    height: 100%;
}
.left {
    width: 120px;
    background: red;
}
.right {
    width: calc(100% - 120px);
    background: blue;
}

3、float + margin-left实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
    width: 100vw;
    height: 100vh;
}
.left {
    width: 120px;
    height: 100vh;
    background: red;
    float: left;
}
.right {
    margin-left: 120px;
    background: blue;
    height: 100vh;
}

4、absolute + margin-left实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
    width: 100vw;
    height: 100vh;
}
.left {
    position: absolute;
    width: 120px;
    height: 100vh;
    background: red;
}
.right {
    margin-left: 120px;
    height: 100vh;
    background: blue;
}

5、float + BFC实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
    width: 100vw;
    height: 100vh;
}
.left {
    float: left;
    width: 120px;
    height: 100vh;
    background: red;
}
.right {
    height: 100vh;
    overflow: auto;
    background: blue;
}

6、flex实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    /* flex容器的一个默认属性值:align-items: stretch;。这个属性导致了为了让两个盒子高度自动，需要设置: align-items: flex-start; */
    align-items: flex-start;
}
.left {
    width: 120px;
    height: 100vh;
    flex: 0 0 auto;
    background: red;
}
.right {
    height: 100vh;
    flex: 1 1 auto;
    background: blue;
}

总结

以上六种该方案实现，其中1、2方案都是利用calc计算属性来实现右侧自适应，1方案中因为都是inline-block，需要设置font-size： 0;来去除空格影响,不设置会出现两个之间会有间隔，导致右边盒子掉到下一行，第3种方案，左边盒子左浮动，右边盒子不浮动，如果不设置margin-left会导致右边盒子覆盖在左边盒子上面，第4种实现方案与第3种实现方案相同。利用左边盒子脱离文档流设置margin-left。第五种左边浮动，右边如果不设置overflow：auto;不会触发元素的BFC，如果不触发元素的BFC会导致，右边的盒子叠在左边盒子上面，触发元素的BFC后，作用就是让右边的盒子不与左边的盒子重叠。第六种实现用的flex，左边的盒子固定宽，设置flex：0 0 auto或者flex: none;不会根据布局伸缩，右边盒子设置flex: 1 1 auto;为弹性盒子，充满剩余部分，还有就是父级盒子设置align-items: flex-start;是因为flex容器的一个默认属性值:align-items: stretch;。这个属性导致了为了让两个盒子高度自动，需要设置: align-items: flex-start;