關於頁面無法實現高度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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM