Css不是頁面的全高

我在這裏有這個圖像，只是一個簡單的引導程序網站。Css不是頁面的全高

繼承人的代碼。我已經厭倦了100％的身高，因爲你可以看到它，但它不工作，我想黑色背景是屏幕的全高。

<div class="col-md-8" style="background-color:#333333; height:100%"> 
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p> 
</div> 
<div class="col-md-4" style="background-color:#ffffff;"> 
    <p style="color:#333; padding-top:20%; font-size:80px">Text</p> 

</div>

來源

2015-10-19 Tester123

您最穩妥會得到標記爲重複的問題，因爲我看到了這個問題，每天至少一次，但簡單的答案，你還必須設置身體和HTML元素100％身高 – Wobbles

設置身高和HTML高度100％沒有工作:( – Tester123

確定它確實https://jsfiddle.net/yh5ohsxd/如果它doesnt然後還有更多的父元素不包含在代碼中。 – Wobbles

在CSS：

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

確保，你的DIV不是另一個DIV

來源

2015-10-19 19:18:15

的孩子爲了百分比的高度工作，這裏需要的高度設置在父元素上。如果父母的高度是一個百分比，那麼它將要求父母的高度也設置在其上。這就是爲什麼簡單地應用html, body { height: 100%; }可能不起作用 - 您的元素可能不是<body>的孩子，因此打破了鏈條。

例如，不工作，鏈條被打破：

<html class="percentage-height-set"> 
<body class="percentage-height-set"> 
    <div class="no-height-set"> 
     <div class="no-height-set"> 
      <div class="percentage-height-set"></div> 
     </div> 
    </div> 
</body> 
</html>

作品，鏈是完整的：

<html class="percentage-height-set"> 
<body class="percentage-height-set"> 
    <div class="percentage-height-set"></div> 
</body> 
</html>

由於百分比高度要求的高度要在其父設置元素的數學可能看起來像這樣：

[parent height] * [percentage height of child] = [pixel height of child]

而且你在做什麼：

?? * .05 = ??

有了一套高度上的父：

500px * .05 = 25px

來源

2015-10-19 19:18:51 hungerstar

Css不是頁面的全高

回答

相關問題