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

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

I am leeb

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

阅读量354

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/leeb2011/article/details/115337282

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

I am leeb

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS经典后台布局——头尾固定高度+中间高度自适应

CSS经典布局——头尾固定高度+中间高度自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台布局</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <
复制链接

扫一扫

专栏目录