css两栏布局（一边定宽，一边自适应）
作者：互联网
html:代码
<body>
<div class="header">header</div>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
1）float
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
}
.header,.footer{
background-color: skyblue;
height: 50px;
}
.left{
height: 400px;
background-color: blue;
margin-right: 300px;
}
.right{
float: right;
width: 300px;
height: 400px;
background-color: pink;
}
2）定位
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
position: relative;
width: 100%;
}
.header,.footer{
background-color: skyblue;
height: 50px;
}
.left{
background-color: blue;
height: 200px;
position: absolute;
width: 200px;
}
.right{
height: 200px;
margin-left: 200px;
background-color: pink;
}
3）使用calc函数
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
/* width: 100%; */
}
.header,.footer{
background-color: skyblue;
height: 50px;
}
.left{
background-color: blue;
height: 200px;
float: left;
width: 300px;
}
.right{
height: 200px;
float: left;
background-color: pink;
width: calc(100% - 300px);
}
注意使用calc函数时，运算符前后都要有空格
标签：两栏,right,color,height,width,background,一边,css,left 来源： https://www.cnblogs.com/Allalms/p/15244686.html