左侧内容固定,右侧自动适应屏幕布局是开发中常见的布局,一般常见于后台管理系统等:左侧展示tab栏,右侧展示管理的内容。
以下是七种方法:
- 左侧浮动 + 右侧BFC
- 左侧浮动 + 右侧margin
- 左侧固定 + 右侧margin
- 左侧固定 + 父级padding
- 先两个在一行 + 右侧calc
- 弹性布局
- 网格布局
初始样式+DOM解构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始样式+DOM解构</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 80vh;
}
.left {
width: 200px;
height: 80vh;
background-color: cyan;
}
.right {
height: 200px;
background-color: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>