身高超過瀏覽器高度的100％

我在建立響應式網站。我不想在px中設置默認高度，但我想要這樣的東西。這將只是佈局的最高點。例如。 prowly.com。身高超過瀏覽器高度的100％

enter image description here

我的小提琴：

http://jsfiddle.net/QVxW8/1/

 html, body { 
      margin: 0; 
      padding:0; 
     } 
     div#handler { 
      width: 100%; 
      height: 110%; 
      display:block; 
     } 
     div#content { 
      width: 100%; 
      height:100%; 
      background: red; 
     } 
     div#content2 { 
      width: 100%; 
      height: 10%; 
      background: blue; 
     }

HTML

<body> 
    <div id="handler"> 
     <div id="content">I want to 100% height of browser</div> 
     <div id="content2">I want 10% of height browser</div> 
    </div> 
</body>

詩篇。正如我還看到，100％的高度是在Safari iPhone和Opera Mobile上的錯誤，所以我不知道該怎麼辦。當然，我可以使用JS，但我想知道是否有其他方法？

來源

2013-08-26 G.Z

沒有錯誤。它應該是這樣的。 –

嘗試位置：絕對; #handler – Tiago

此外，它已被問及http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height –

你需要設置的身體像這樣

html, body { 
       margin: 0; 
       padding:0; 
       position:absolute;/* this is very important*/ 
       bottom:0; 
       top:0; 
       right:0; 
       left:0; 
      }

演示：http://jsfiddle.net/QVxW8/5/

或像這樣：

html, body { 
       margin: 0; 
       padding:0; 
       position:absolute;/* this is very important*/ 
       left:0; 
       top:0; 
       width:100%; 
       height:100%; 
      }

，並有正確的價值觀使用

*{ 
margin:0; 
padding:0; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
}

或者只是改變你的代碼

html, body { 
       margin: 0; 
       padding:0; 
       height:100%; 
      }

演示：http://jsfiddle.net/QVxW8/6/

來源

2013-08-26 17:25:04

試試這個

*{padding: 0; marign:0;} 
     html, body { 
      margin: 0; 
      padding:0; 
     } 
     div#handler { 
      width: 100%; 
      height: 110%; 
      display:block; 
     } 
     div#content { 
      width: 100%; 
      height:100%; 
      background: red; 
     } 
     div#content2 { 
      width: 100%; 
      height: 10%; 
      background: blue; 
     }

來源

2013-08-26 16:58:42

它不起作用 –

嘗試增加100％高度在html, body像這樣：

html, body { 
     height: 100%; 
     margin: 0; 
     padding:0; 
    }

JSFIDDLE

編輯：您可能需要閱讀文章this。

來源

2013-08-26 16:58:50 Mike

身高超過瀏覽器高度的100％

回答

相關問題