1.display:table width:100% 和 diplay : table-cell
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<style>
#wrap{
display: table;
width: 100%;
background-color: #eee;
}
.sidebar{
display: table-cell;
width: 300px;
background-color: red;
}
.content{
display: table-cell;
background-color: pink;
}
</style>
<body>
<div id="wrap">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
</body>
</html>
2:float 单一层浮动法
例如:左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{height:200px;}
.left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;}
.right{margin-left:100px;width:auto;height:100px;background-color:blue;}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.定位 ,在固定元素上加入绝对定位,自适应元素设置成margin-left:固定元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{height:200px;}
.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}
.right{margin-left:100px;height:100px;background-color:yellow;}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.左边设置左浮动,右边宽度设置100%
.left{float:left;}
.right{width:100%;}
5. 父容器设置 display:flex;Right部分设置 flex:1
.container{display:flex;}
.left{width:200px;}
.right{flex:1;}