方法一 margin-bottom padding-bottom
*{
margin: 0px;
padding: 0px;
list-style:none;
}
.all{
overflow: hidden;
}
.left{
width: 200px;
height: 200px;
float: left;
background: greenyellow;
overflow: hidden;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.right{
width: 700px;
height: 500px;
float: left;
background: lightcoral;
overflow: hidden;
padding-bottom: 10000px;
margin-bottom:
}
<body>
<!-- 实现网页左右两边盒子高度自适应布局 -->
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
核心处在于，在名为all的div中设置overflow:hidden。
还有left,right; margin-bottom负值，padding-bottom填充
方法二 flex
<style>
* {
margin: 0px;
padding: 0px;
}
.all{
display: flex;
}
.center{
flex: 1;
float: left;
background: pink;
}
.left,.right{
width: 200px;
float: left;
background: green;
height: 200px;
}
</style>
<div class="all">
<div class="left">我是左边盒子</div>
<div class="center">我是中间盒子</div>
<div class="right">我是右边盒子</div>
</div>
方法三 table
<style>
*{
margin: 0px;
padding: 0px;
}
.layout{
display: table;
width: 100%;
}
.layout_row{
display: table-row;
}
.layout_row div{
display: table-cell;
text-align: center;
}
.cell-left,.cell-right{
width: 200px;
background: pink;
height: 200px;
}
.cell-center{
background: yellowgreen;
}
</style>
<body>
<div class="layout">
<div class="layout_row">
<div class="cell-left">左侧边栏宽度固定</div>
<div class="cell-center">中间内容自适应</div>
<div class="cell-right">右侧边栏宽度固定</div>
</div>
</div>
</body>