1）用BDC实现分2栏：右栏自适应
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
100%;
height:100%;
background:orange;
}
.left{
200px;
height:100%;
background:pink;
/* 浮动 */
float:left;
}
.right{
height:100%;
background:green;
/* bfc区域不会与浮动盒子重叠 */
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">111111111</div>
</div>
</body>
2）弹性盒实现中间一栏自适应
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
100%;
}
body{
display: flex;
}
nav{
background-color: tomato;
200px;
}
section{
background-color: thistle;
flex: 1;
}
aside{
background-color: teal;
100px;
}
</style>
</head>
<body>
<nav></nav>
<section></section>
<aside></aside>
</body>
3）用BFC实现分3栏，中间一栏自适应
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
100%;
height:100%;
background:purple;
}
.left{
200px;
height:100%;
float:left;
background:pink;
}
.center{
height:100%;
background:green;
overflow:hidden;
}
.right{
200px;
height:100%;
float:right;
background:#dd0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<!-- 自适应的一栏一定要写在最后-->
</div>
</body>
4）用padding实现分三栏，中间一栏自适应
<style>*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
100%;
height:100%;
background:purple;
}
.left{
200px;
height:100%;
background:pink;
float:left;
}
.right{
200px;
height:100%;
background:#dd0;
float:right;
}
/* 中间的板块 */
.center{
height:100%;
background:red;
/* 用padding 把center的子元素挤到中间 */
padding:0 200px;
}
.center-con{
height:100%;
background:#ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div class="center-con"></div>
</div>
</div>
</body>
5）用margin实现分3栏，中间一栏自适应
<style>
*{
margin:0;
padding:0;
}
body,html{
height:100%;
}
.box{
100%;
height:100%;
background:grey;
}
.left{
200px;
height:90%;
background:pink;
float:left;
}
.right{
200px;
height:90%;
background:blue;
float:right;
}
.center{
height: 100%;
background:#dd0;
margin:0 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>