如何防止vh-units忽略滾動條？

我正在使用水平滾動條處理頁面佈局。我有一些固定寬度的面板以水平順序排列，應該都具有視口高度。我決定測試vh單位來做到這一點。如何防止vh-units忽略滾動條？

.panel { height: 100vh; }

這工作正常，直到我得到一個滾動條。問題是，vh忽略了滾動條使用的高度，因此添加了一個垂直滾動條。

我想從vh的測量值中減去滾動條的高度;有沒有辦法做到這一點？

來源

2013-10-29 Afterlame

如何'.panel {高度：計算值（100vh-知識+）; }'。我不知道滾動條有多大，如果這是瀏覽器/操作系統的依賴。 – kleinfreund

@kleinfreund我以前使用過最新的Chrome和Safari版本嘗試過。兩者都給我'意外的CSS令牌：）'。如前所述，仍然存在未知滾動條高度的問題。 – Afterlame

然後，您可能需要依靠Javascript並計算滾動條的_actual_高度。但我相信你想要一個好的基於css的解決方案，這將是更可取的。是的，我使用Google和視口單元和calc（）並不真正在使用atm。 – kleinfreund

您可以使用帶有overflow-y：hidden的父元素來確保不會獲得垂直滾動條，然後在其內部安全地使用100vh。這是假設你確實需要100vh出於某種原因，並不只是需要填充垂直空間。

HTML

<div id="main"> 
    <div id="container"></div> 
</div>

CSS

#main { 
    width:200vw; 
    height:100%; 
    background: red; 
    position: absolute; 
    overflow-y: hidden; 
} 

#container { 
    height: 100vh; 
    width:10px; 
    background: blue; 
}

來源

2014-10-16 02:44:20 mirichan

我沒有看到利用隱藏溢出封面的優點。然後你可以設置高度：100％到#container，而不是100vh。 –

我同意100vh是不必要的，並在我的回答中儘可能多地暗示，但問題是關於視口單元的具體問題。 – mirichan

如何防止vh-units忽略滾動條？

回答

相關問題