·vincent

CSS-右侧高度自适应

CSS-右侧高度自适应,左侧高度与右侧保持一致

htmlcss
html
1
2 div{
3      border: 1px solid black;
4}
5/*position*/
6.left{
7  height: 100%;
8  width: 100px;
9  background: aqua;
10  position: absolute;
11}
12.right{
13  width: 300px;
14  margin-left: 110px;
15  background: antiquewhite;
16}
17.parent{
18  position: relative;
19}
20
html
1 /*margin负值*/
2.parent{
3  overflow: hidden;
4}
5.left,.right{
6  margin-bottom: -5000px;
7  padding-bottom: 5000px;
8}
9.left{
10  float: left;
11  background: aqua;
12}
13.right{
14  float: right;
15  background: antiquewhite;
16}
17
html
1 /*flex布局*/
2    .parent{
3      display: flex;
4      display: -webkit-flex;
5      display: -o-flex;
6      display: -moz-flex;
7      display: -ms-flex;
8      align-items: stretch;
9    }
10    .left{
11      background: aqua;
12    }
13    .right{
14      margin-left: 110px;
15      background: antiquewhite;
16    }
17