分享一个HTML中的布局样式
代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS自适应布局</title>
<style>
:root{
--topHeight:60px;
--leftBox:300px
}
.topbar{
color: white;
width: 100%;
height: var(--topHeight);
background: black;
position: absolute;
}
.zhong{
width: 100%;
top: var(--topHeight);
position: absolute;
bottom: var(--topHeight);
}
.zhong .left{
height: 100%;
width: var(--leftBox);
float: left;
overflow: auto;
background: yellowgreen;
}
.zhong .right{
height: 100%;
margin-left:calc(var(--leftBox) + 20px);
background: yellowgreen;
}
.bottom{
color: white;
width: 100%;
height: var(--topHeight);
bottom: 0px;
position: absolute;
background: black;
}
</style>
</head>
<body style="margin: 0px;padding: 0px;">
<div class="topbar">顶边的盒子</div>
<div class="zhong">
<div class="left">左边的盒子</div>
<div class="right">右边的盒子</div>
</div>
<div class="bottom">底边的盒子</div>
</body>
</html>
相信利用这个布局可以分构出许多的布局出来
本文地址：https://blog.csdn.net/qq_28429161/article/details/107280335
