百分比高度HTML 5/CSS

115

我試圖將<div>設置爲CSS中的某個百分比高度，但它只是保持與其中的內容大小相同。但是，當我刪除HTML 5 <!DOCTYTPE html>時，它會起作用，<div>會根據需要佔據整個頁面。我想要頁面驗證，那麼我該怎麼辦？百分比高度HTML 5/CSS

我對這個<div> CSS，其中有page的ID：

#page { 
    padding: 10px; 
    background-color: white; 
    height: 90% !important; 
}

來源

2009-10-25 D. Strout

這裏的CSS'用百分比值height'財產的一個簡單而明確的解釋：http://stackoverflow.com/a/31728799/3597276 –

解決DOCTYPE問題：http://stackoverflow.com/ a/32215263/3597276 –

295

我想一個div設置一定比例的高度在CSS

的百分比是多少？

設置一個百分比高度，它的父元素（*）必須有一個明確的高度。這是相當不言而喻的，因爲如果你將高度保留爲auto，該塊將佔據其內容的高度......但是如果內容本身具有以父母的百分比表示的高度，小捕捉22.瀏覽器放棄，只是使用內容的高度。

所以div的父母必須有明確的height財產。雖然這個高度也可以是一個百分比，如果你想，這只是將問題提升到一個新的水平。

如果你想在div高度視口高度的百分比，股利的每一個祖先，包括<html>和<body>，必須有height: 100%，所以有明確的百分比高度的環比回落到div。

（*：或者，如果在div被定位時，「包含塊」，這是最近的祖先還可以定位）

可替代地，所有現代瀏覽器和IE> = 9支持新的CSS單元相對於視口的高度（vh）和視口寬度（vw）：

div { 
    height:100vh; 
}

在這裏看到more info。

來源

2009-10-25 21:17:03 bobince

雖然不適用於縱向屏幕方向http://stackoverflow.com/questions/23198237/percentage-of-height-not-working-for-portrait-screen-orientation – Dchris

請參閱下面的布賴恩坎貝爾的答案我相信這是正確的解決方案。這個答案似乎是一個解決方法，並沒有解決實際問題。 –

您需要設置的高度上<html>和<body>元素爲好;否則，它們只會大到足以容納內容。 For example：

<!DOCTYPE html> 
 
<title>Example of 100% width and height</title> 
 
<style> 
 
html, body { height: 100%; margin: 0; } 
 
div { height: 100%; width: 100%; background: red; } 
 
</style> 
 
<div></div>

來源

2009-10-25 21:15:03

¬_¬我花了20分鐘才弄清楚我必須將文檔高度設置爲100％。我讀這篇文章有點太晚了，但它仍然非常出色。 *嘆息* – omninonsense

這應該被視爲答案，因爲它給很多來這裏的人提供了一個解決方案，想知道怎麼做才能看到第一個答案，並且認爲它不可能，並且不用考慮是否存在任何其他方法 –

我同意這是正確的答案，高度不起作用，因爲父元素是body和html需要設置。這個答案應該是被接受的答案。 –

bobince的回答會讓你知道在哪些情況下「身高：XX％;」將或不會工作。

如果您想創建一個具有設定比例（高度：自身寬度的百分比）的元素，最好的方法是使用padding-bottom有效地設置高度。例如，對於方形：

<div class="square-container"> 
    <div class="square-content"> 
    <!-- put your content in here --> 
    </div> 
</div> 

.square-container { /* any display: block; element */ 
    position: relative; 
    height: 0; 
    padding-bottom: 100%; /* of parent width */ 
} 
.square-content { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
}

方形容器將剛製成的填充物，並且內容將擴大到填充容器。關於這個問題的2009年以來的長文章：http://alistapart.com/article/creating-intrinsic-ratios-for-video

來源

2013-06-17 22:46:05

非常感謝！ – zaw

您可以使用100vw/100vh。 CSS3爲我們提供了視口相關單位。100vw意味着100％的視口寬度。 100vh;身高的100％。

<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh"> 
     <div style="width:70%; height: 100%; border: 2px dashed red"></div> 
     <div style="width:30%; height: 100%; border: 2px dashed red"></div> 
    </div>

來源

2016-10-26 06:58:16

百分比高度HTML 5/CSS

回答

相關問題