我有兩列的布局-左div和右div，
右邊div有一個灰色background-color，我需要根據用戶瀏覽器視窗的高度垂直擴展它，現在background-color結束于該內容的最后一部分div，
我試過height:100%，min-height:100%;等
有幾個CSS 3度量單位，稱為：
視口百分比（或相對于視口）長度
什么是視口百分比長度？
根據上面鏈接的W3候選推薦書：
視口百分比長度相對于初始包含塊的大小，更改初始包含塊的高度或寬度時，將對其進行相應縮放，
這些單位是vh（視口高度），vw（視口寬度），vmin（視口最小長度）和vmax（視口最大長度），
如何使用它來使分隔符填充瀏覽器的高度？
對于這個問題，我們可以使用vh：1vh等于視口高度的1％，也就是說100vh，無論元素在DOM樹中位于什么位置，它都等于瀏覽器視窗的高度：
的HTML
<div></div>
的CSS
div {
height: 100vh;
}
這實際上就是所需要的，這是一個正在使用的JSFiddle示例，
哪些瀏覽器支持這些新單元？
目前，除Opera Mini之外，所有最新的主流瀏覽器均支持此功能，請查看我可以使用...以獲得更多支持，
如何將其與多列一起使用？
對于帶有左分隔線和右分隔線的當前問題，這是一個JSFiddle示例，該示例顯示了一個兩列布局，其中涉及vh到vw，
如何100vh不同100%？
以以下布局為例：
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
p此處的標簽設定為100％高度，但由于其包含的div高度為200像素，因此200像素中的100％變為200像素，而不是body高度的100％，100vh改為使用表示p標簽的高度將為100％的高度，body而與div高度無關，看看這個隨附的JSFiddle，可以輕松看到其中的區別！
本文首發于前端黑洞網，博客園同步跟新
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285907.html
標籤：Html/Css
下一篇：Django——form表單