CSS经典布局——头尾固定高度+中间高度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台布局</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="header">标题</div>
<div class="mainContent">
<div class="leftContent">菜单</div>
<div class="rightContent">操作区</div>
</div>
<dic class="footer">版权所有</dic>
</body>
</html>
*{
margin: 0;
padding: 0;
background-color: #aaffff;
}
.header{
width: 100%;
height: 80px;
background-color: #ffaa00;
}
.footer{
width: 100%;
height: 60px;
background-color: #aaaa00;
position: absolute; /* absolute定位 */
bottom: 0;
}
.mainContent{
width: 100%;
background-color: #aaff00;
height: auto;
position: absolute; /* absolute定位 */
top:80px; /* header高度 */
bottom: 60px; /* footer高度 */
display: flex; /* flex盒子让两个div横向排列 */
}
.leftContent{
min-width: 180px; /* 保证宽度不变 */
min-height: 300px;
background-color: #00aaff;
}
.rightContent{
width: 100%;
min-height: 300px;
background-color: #ff5500;
}