css左侧跟随右侧⾼度⾃适应
1、position
给⽗元素设置position:relative，左边的⼦元素设置position:absulote，且左边元素的⾼度为100%。CSS代码如下：
/*position*/
.left{
height: 100%;
width: 100px;
background: aqua;
position: absolute;
}
html的flex布局
.right{
width: 300px;
margin-left: 110px;
background: antiquewhite;
}
.parent{
position: relative;
}
2、margin负值
这种⽅法的原理其实是把⼦元素的实际⾼度撑开的很多，⽗元素overflow：hidden起到⼀个遮罩作⽤，来保持左右两侧元素⾼度相等的。css代码如下
/*margin负值*/
.parent{
overflow: hidden;
}
.left,.right{
margin-bottom: -5000px;
padding-bottom: 5000px;
}
.left{
float: left;
background: aqua;
}
.right{
float: right;
background: antiquewhite;
}
3、flex布局
flex布局的中align-items的stretch属性可以让内部元素⾼度铺满。CSS代码如下：
/*flex布局*/
.parent{
display: flex;
display: -webkit-flex;
display: -o-flex;
display: -moz-flex;
display: -ms-flex;
align-items: stretch;
}
.left{
background: aqua;
}
.right{
margin-left: 110px;
background: antiquewhite;
}
本⽂摘⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。