第一种：BFC实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.aside{
width: 200px;
height: 300px;
background-color: green;
float: left;
}
.main{
height: 400px;
background-color: blanchedalmond;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
</body>
</html>
第二种：calc函数实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calc函数</title>
<style>
.aside{
width: 200px;
height: 300px;
background-color: blueviolet;
float: left;
}
.main{
width: calc(100% - 200px);
height: 400px;
background-color: violet;
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
</body>
</html>
第三种：flex实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒实现自适应两栏式布局</title>
<style>
.wrap{
display: flex;
min-height: 500px;
}
.aside{
width: 200px;
min-height: 400px;
background-color: tomato;
}
.content{
min-height: 500px;
flex: 1;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="wrap">
<div class="aside"></div>
<div class="content"></div>
</div>
</body>
</html>
注意：flex和calc函数是css3的内容，不兼容低版本浏览器