2017-07-28 106 views
0

我無法弄清楚爲什麼這樣不起作用。將HTML高度設置爲100%可消除滾動

我需要設置HTML和body的高度爲100%,以便設置頁面內部三行的高度,但是當我這樣做時,它消除了滾動,特別是在移動設備上,但即使在某些瀏覽器窗口大小當調整大小時。

html, body { 
 
     height: 100%; 
 
     display:block; 
 
     margin: 0; 
 
     padding: 0; 
 
     background-color: #f7f7f7; 
 
     overflow:scroll; 
 
    } 
 
    .row1 {height:15%;} // header 
 
    .row2 {height:70%;} // body 
 
    .row3 {height:15%;} // footer
<html> 
 
     <body> 
 
     <div class="row1"> ...needs to be 15% height </div> 
 
     <div class="row2"> ...needs to be 70% height </div> 
 
     <div class="row3"> ...needs to be 15% height </div> 
 
     </body> 
 
    </html>

如果我刪除HTML上的100%,則頁面滾動,但高度,這需要進行基於百分比,不能正常工作。任何幫助如何解決這將不勝感激。

我發現從谷歌搜索和看我在其他項目上的代碼的所有帖子都沒有提供這個問題的解決方案。

+5

如果DIV高度達100%,就會有什麼可滾動。如果超過100%,[它可以滾動](https://jsfiddle.net/o7cL95rp/)。 – showdev

+0

https://jsfiddle.net/jjx9dypr/ – banzomaikaka

+0

順便說一句:你不能評論與/ /在CSS中。當您將元素的高度設置爲100%時,使用/ *註釋* /格式 – RMo

回答

1

html, body { 
 
     height: 100vh; 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     background-color: #f7f7f7; 
 
     overflow:scroll; 
 
    } 
 
    .container{ 
 
     height: 100%; 
 
     width: 100%; 
 
     display:inline-block; 
 
    } 
 
    .row1 {height:15%;width: 100%;display:inline-block;} 
 
    .row2 {height:70%;width: 100%;display:inline-block;} 
 
    .row3 {height:15%;width: 100%;display:inline-block;}
<html> 
 
     <body> 
 
     <div class="container"> 
 
     <div class="row1"> ...needs to be 15% height </div> 
 
     <div class="row2"> ...needs to be 70% height </div> 
 
     <div class="row3"> ...needs to be 15% height </div> 
 
     <div> 
 
     </body> 
 
    </html>

添加樣式元素和DIV容器&起飛的評論//

0
  • 因爲它是,它不會滾動,因爲它要佔用100%的視口 高度。
  • 您的css註釋格式錯誤,請改用/* comment */

段:

html, 
 
body { 
 
    height: 100%; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: #f7f7f7; 
 
    overflow: scroll; 
 
} 
 
.row1 {height: 15%;} /* header */ 
 
.row2 {height: 70%;} /* body */ 
 
.row3 {height: 15%;} /* footer */
<div class="row1"> ...needs to be 15% height </div> 
 
<div class="row2"> ...needs to be 70% height </div> 
 
<div class="row3"> ...needs to be 15% height </div>

+0

你可能想解釋通配符css在做什麼(我個人很熟悉,但其他人可能想知道這是怎麼回事,爲什麼它包含在你的代碼中)。 – user2366842

+0

是的,你是正確的,謝謝,會做。 – Syden

0

你可以試試這個代碼。瀏覽器屏幕尺寸不同。因此我們用魔杖來設置高度根據瀏覽器屏幕尺寸。

jQuery的

$(document).ready(function(){ 

var height =$(window).height(); 
alert(height); 
var height1 =($(window).height() *15)/100 
var height2 =($(window).height() *70)/100 

$('.row1').css("height",height1); 
$('.row2').css("height",height2); 
$('.row3').css("height",height1); 
})