私は水平スクロールバーを使ってページレイアウトを作成しています。 固定幅のパネルを横に並べたものがあります。これらはすべてビューポートの高さでなければなりません。私はvhユニットをテストすることにしました。vh-unitsがスクロールバーを無視しないようにするにはどうすればいいですか？
.panel { height: 100vh; }
スクロールバーが表示されるまで、これは正常に機能しています。 問題は、vhがスクロールバーで使用される高さを無視するため、垂直スクロールバーが追加されることです。
私はvhの測定値からスクロールバーの高さを差し引きたいと思います。これを行う方法はありますか？
overflow-y：hiddenを持つ親要素を使用して、垂直スクロールバーを取得せずに安全に100vhを使用することができます。これは何らかの理由で実際に100vhが必要であり、垂直スペースを埋める必要はないと仮定しています。 `.panel {高さについて
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;
}
私はオーバーフローを隠してカバーを使用することに賛否両論はありません。あなたは100vhではなく、100％を#containerに設定できます。 –
私は100vhが不必要で、私の答えで多くのことを暗示することに同意しますが、問題はビューポート単位についてのものでした。 – mirichan
方法：CALC（100VH-17px）; } '。私はスクロールバーがどれくらい大きいのか、これがブラウザー/ OSに依存しているのか分かりません。 – kleinfreund
@kleinfreund私は前にChromeとSafariの最新のバージョンでこれを試しました。どちらも私に '予期しないCSSトークン：'を与える。それでも、あなたが以前に言及したように、未知のスクロールバーの高さに問題があります。 – Afterlame
次に、Javascriptを使用してスクロールバーの_実際の高さを計算したいと思うかもしれません。しかし、私はあなたがよいCSSベースのソリューションを望んでいると確信しています。そして、はい、私はgoogledとビューポートユニットとcalc（）実際にatm働いていない。 – kleinfreund