web-dev-qa-db-ja.com

vh-unitsがスクロールバーを無視しないようにするにはどうすればよいですか？

水平スクロールバーを使用したページレイアウトに取り組んでいます。水平方向に固定幅のパネルがいくつかありますが、すべてビューポートの高さが必要です。それを行うために、vhユニットをテストすることにしました。

.panel { height: 100vh; }

スクロールバーが表示されるまで、これは正常に機能しています。問題は、vhがスクロールバーで使用される高さを無視するため、垂直スクロールバーが追加されることです。

vhの測定値からスクロールバーの高さを差し引きたいと思います。これを行う方法はありますか？

cssunits-of-measurementviewport-units
18
Afterlame

垂直スクロールバーが表示されないように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;
}
5
mirichan