1.左侧固定,右侧自适应的方法
第一种:(注意父级中box-sizing: border-box;)
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding:0;
margin:0;
}
html,body,.box{
width:100%;
height:100%;
}
.box{
padding-left:100px;
box-sizing: border-box;
}
.left{
width:100px;
height:100%;
float:left;
background: #f00;
margin-left:-100px;
}
.right{
width:100%;
height:100%;
background: #ff0;
}
</style>
<body>
<div class="box">
<div class="left">111</div>
<div class="right">222</div>
</div>
</body>
</html>
2.第二种
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
padding:0;
margin:0;
}
html,body,.box{
width:100%;
height:100%;
}
.left{
width:100px;
height:100%;
float:left;
background: #f00;
}
.right{
width:calc(100% - 100px);
height:100%;
float:right;
background: #ff0;
}
</style>
<body>
<div class="box">
<div class="left">111</div>
<div class="right">222</div>
</div>
</body>
</html>