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>