制作网站后台时设置铺满屏幕的div-css代码实现！

转载于 2017-07-05 09:53:00 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaogou/p/7119699.html

本文介绍了一种能够自适应并撑满整个浏览器可视区域高度的div布局方法，该方法适用于固定位置的后台框架设计中放置iframe等元素，通过简单的CSS样式实现。

可以设置一个撑到页面底部的div（此div无需指定高度可以自动呈现盛满屏幕的高度）一般用于制作后台框架式放置iframe模块用

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7     .admin{background:#fff;position:fixed;border-left:solid 1px 
 8     #b5cfd9;right:0;bottom:0;top:100px;left:180px; padding:15px; padding-
 9     right:0px; padding-bottom:0px; overflow:auto; border-top:1px solid 
10     #b5cfd9; padding-right:15px;}
11     .s{width: 500px; height: 1200px; background: #fefefe;}
12 </style>
13 </head>
14 <body>
15     <div class="admin">
16         <div class="s">class="admin"的div可以盛满屏幕到底部</div>
17     </div>
18 </body>
19 </html>