Как запретить vh-units игнорировать полосу прокрутки?

Я работаю над макетом страницы с горизонтальной полосой прокрутки. У меня есть панели с фиксированной шириной в горизонтальном порядке, которые должны иметь высоту видового экрана. Я решил протестировать блок vh, чтобы сделать это.

.panel { height: 100vh; }

Это работает нормально, пока я не получу полосу прокрутки. Проблема заключается в том, что vh игнорирует высоту, используемую полосой прокрутки, и поэтому добавляет вертикальную полосу прокрутки.

Я хотел бы вычесть высоту полосы прокрутки из измерений vh; есть ли способ сделать это?

Ответы

Ответ 1

Вы можете использовать родительский элемент с 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;
}