css布局--左固定右自适应两栏布局
2019-08-22 本文已影响0人
琉璃_xin
默认结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左侧固定 右侧自适应--两栏布局</title>
<style>
.outer {
height: 60px;
}
.sidebar,
.content {
height: 100%;
}
.sidebar {
width: 200px;
background: red;
}
.content {
background: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="sidebar">固定宽度区(sideBar)</div>
<div class="content">自适应区(content)</div>
</div>
</body>
</html>
默认布局
可以利用以下方法达到左侧固定右侧自适应的效果:
两栏布局
- 利用BFC与浮动元素不重叠
.sidebar{
float: left;
}
.content{
overflow: hidden;//触发BFC
}
- 利用浮动和margin-left
.sidebar{
float: left;
}
.content{
margin-left: 200px;
}
- 利用绝对定位和margin-left
.outer{
position: relative;
top: 0;
left: 0;
}
.sidebar{
position: absolute;
top: 0;
left: 0;
}
.content{
margin-left: 200px;
}
- float和calc配合
.sidebar{
float: left;
}
.content{
float: left;
width: calc(100% - 200px);
}
- inline-block和calc配合
要记得父级font-size:0; 去除内联元素中间的空白。
.outer{
font-size: 0;
}
.sidebar{
display: inline-block;
font-size: 16px;
}
.content{
display: inline-block;
width: calc(100% - 200px);
font-size: 16px;
}
- flex
.outer{
display: flex;
}
.content{
flex: 1; //自动填充剩余空间
}
