码迷,mamicode.com
首页 > 其他好文 > 详细

全屏布局

时间:2020-03-05 01:11:29      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:dde   图片   content   ack   gray   fixed   没有   div   ima   

全屏布局就是指html页面铺满整个浏览器窗口,并且没有滚动条,而且还可以跟随浏览器的大小变化而变化

技术图片

<header></header>
<div class="content">
   <div class="left"></div>
   <div class="right"></div>
</div>
<footer></footer>
html,body{
   margin: 0;
   overflow:hidden;
}

header{
   height: 100px;

   position: fixed;
   top:0;
   left: 0;
   right: 0;
   background-color: lightgray;
}

.content{
   position: fixed;
   left: 0;
   right: 0;
   top: 100px;
   bottom: 100px;

   overflow: auto;
}

.content .left{
   width: 300px;
   height: 100%;
   position: fixed;
   left:0;
   top: 100px;
   bottom: 100px;
}

.content .right{
   height:1000px;
   margin-left:300px;
} 

footer{
   height: 100px;
   position: fixed;
   bottom:0;
   left:0;
   right:0;
   background-color: lightgray;
}

 

全屏布局

标签:dde   图片   content   ack   gray   fixed   没有   div   ima   

原文地址:https://www.cnblogs.com/qjb2404/p/12417031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!