见代码
<div id="wrap"> <div id="left"> <h1>134132412</h1> <h1>134132412</h1> </div> <div id="right"> <h1>134132412</h1> <h1>134132412</h1> <h1>134132412</h1> <h1>134132412</h1> <h1>134132412</h1> <h1>134132412</h1> </div> </div>
css代码
<style type="text/css"> #wrap { width: 100%; height: 100%; background-color: aqua; border: 1px solid black; border-bottom: 0px solid trans; display: flex; } #left { width: 300px; background-color: yellow; border: 1px solid black; } #right { flex:1; background-color: red; border: 1px solid black;
overflow-x:hidden;
} #left h1 { width: 100%; height: 100px; } #right h1 { width: 100%; height: 100px; } </style>
这段代码主要用到 display:flex;弹性盒模型。达到效果是:左边固定,右边自适应,左边高度和父元素等高