css 实现后台管理框架的网页布局，上中下三部分，中间为固定宽度且分为左右两部分

最新推荐文章于 2023-01-04 14:30:56 发布

随风落梦

最新推荐文章于 2023-01-04 14:30:56 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/chenludaniel/article/details/90750705

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css 实现后台管理框架的网页布局，上中下三部分，中间为固定宽度且分为左右两部分

<!DOCTYPE html>
<html>
<head lang="en">  
  <meta charset="UTF-8"> 
   <title>布局</title>   
 <style>        
html,body{margin:0}     
 .topNav{        
  border:solid 1px red;         
  background: red;          
  position: fixed;          
  width:100%;          
 height:60px;          
 line-height:60px;          
 text-align: center;          
 color:#fff;      
}      
.centerContext{          
  border:solid 1px blue;          
  background: #ccc;          
 position: absolute;          
 width:100%;          
 bottom: 40px;          
 top:60px;          
 text-align: center;          
 color:#fff;          
 left:0;          
 right:0;          
 margin:0 auto;          
 z-index: -1;      
}      
.footer{         
 border:solid 1px green;          
 background: green;          
 height:40px;          
 line-height:40px;          
 position: fixed;        
  bottom: 0;          
  width:100%;          
   text-align: center;         
  color:#fff;      
}     
 .left{         
   border:solid 1px #669ae1;          
   background: #669ae1;          
   width:20%;          
   float:left;          
   height:100%;          
   margin-bottom: 40px;          
   overflow: auto;          
   color:#fff;          
   -webkit-box-sizing: border-box;          
   -moz-box-sizing: border-box;          
   box-sizing: border-box;      
}      
.right{          
   border: solid 1px #1d5464;          
   height:100%;          
   width:80%;          
   background: #1d5464;          
   color:#fff;          
   overflow: auto;          
   -webkit-box-sizing: border-box;         
   -moz-box-sizing: border-box;         
   ox-sizing: border-box;      
}        
.right div{height:1000px}    
 </style>
</head>
<body>    
  <div class="topNav">头部</div>    
   <div class="centerContext">        
       <div class="left">左边</div>        
       <div class="right">            
  <div >我是右边里面的内容我的高度是1000px</div>        
 </div>    
 </div>    
  <div class="footer">底部</div>
 </body>
</html>

随风落梦

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css 实现后台管理框架的网页布局，上中下三部分，中间为固定宽度且分为左右两部分

css 实现后台管理框架的网页布局，上中下三部分，中间为固定宽度且分为左右两部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>布局</title> <style> html,b...
复制链接

扫一扫