关于页面无法实现高度100%的原因及实现方法。

1.由于页面中的html和body默认高度都是自适应的,所以单单给盒子设置高度100%是没有效果的,应该给html和body同时设置高度100%,这样才能把盒子撑开。

但是又由于body默认有margin外边距,所以只设置高度会出现竖向的滚动条。需要设置margin:0;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>成功设置100%高度去除滚动条</title>
 6     <style type="text/css">
 7         html,body{
 8             height: 100%;
 9         }
10         body{
11             margin: 0;
12         }
13     </style>
14 </head>
15 <body>
16 <div style="height: 100%;background-color: #4d85d1">
17     所在div设置高度100%
18 </div>
19 </body>
20 </html>

 

posted @ 2019-04-24 11:13  奔走的松鼠  阅读(1433)  评论(0编辑  收藏  举报