·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