1、position
給父元素設置position:relative,左邊的子元素設置position:absulote,且左邊元素的高度為100%。CSS代碼如下:
/*position*/ .left{ height: 100%; width: 100px; background: aqua; position: absolute; } .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; }