CSS经典后台布局——头尾固定高度+中间高度自适应

最新推荐文章于 2024-04-11 09:57:49 发布

原创最新推荐文章于 2024-04-11 09:57:49 发布 · 444 阅读

4 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个常见的后台布局，采用固定高度的头部和底部，中间内容区域根据浏览器窗口高度自动调整。通过绝对定位和flexbox布局，确保菜单和操作区保持响应式设计。

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;
   }