HTML 5/CSS 百分比高度的技巧
P粉135292805
P粉135292805 2023-08-20 19:15:25
0
2
609
<p>我試圖在CSS中將一個<div>設定為特定的百分比高度,但它仍然與其中的內容大小相同。然而,當我移除HTML 5的<!DOCTYTPE html>時,它可以正常工作,<div>按預期佔據整個頁面。我希望頁面能夠通過驗證,那我該怎麼做呢? </p> <p>我在<div>上有這個CSS,它的ID是<code>page</code>:</p> <pre class="brush:php;toolbar:false;">#page { padding: 10px; background-color: white; height: 90% !important; }</pre>
P粉135292805
P粉135292805

全部回覆(2)
P粉759451255

你還需要在<html><body>元素上設定高度;否則,它們只會足夠大以適應內容。 例如

<!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>
P粉530519234

百分比是什麼的百分比?

要設定百分比高度,其父元素(*)必須具有明確高度。這是相當明顯的,如果您將高度保留為auto,則區塊將採用其內容的高度...但是,如果內容本身的高度以父元素的百分比表示,您就陷入了一個小困境。瀏覽器放棄了,只使用內容高度。

因此,div的父元素必須具有明確的height屬性。雖然如果您願意,該高度也可以是百分比,但這只會將問題提升到下一個等級。

如果您想要讓div的高度成為視窗高度的百分比,則div的每個祖先元素,包括<html><body>,都必須具有height: 100%,因此存在一個明確的百分比高度鏈到div。

(*:或者,如果div被定位,則為“包含區塊”,即最近的也被定位的祖先元素。)

或者,所有現代瀏覽器和IE>=9都支援相對於視口高度(vh)和視窗寬度(vw)的新CSS單位:

div {
    height:100vh; 
}

在此處查看更多資訊

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板