Отрегулируйте высоту сетки до доступного экрана без полосы прокрутки

Какое свойство сетки следует использовать, чтобы сетка оставалась идеально внутри экрана?

Использование height: 100vh; на .wrapper регулирует высоту, но вводит полосы прокрутки. Чтобы удалить ненужные полосы прокрутки, я попытался установить body{margin:0;}, но я хочу иметь поле, окружающее всю сетку, без создания полос прокрутки. Я уверен, что это легко исправить, но, пожалуйста, помогите мне!

Codepen: https://codepen.io/reiallenramos/pen/yzroxe

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: lightcyan;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}
<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>


html css css-grid
person reiallenramos    schedule 22.10.2017    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Основные браузеры обычно устанавливают поле по умолчанию для элемента body. Обычно это 8 пикселей, как рекомендуется W3C.

Следовательно, при установке для элемента body или другого контейнера значения height: 100% будет отображаться вертикальная полоса прокрутки, поскольку существует условие переполнения:

100% + 8px > the viewport height

Простой обходной путь — переопределить правило браузера по умолчанию своим собственным:

body { margin: 0; }

Однако в этом случае вам нужен зазор вокруг основного контейнера. Вам не нужна полоса прокрутки.

Затем просто замените margin на padding и используйте box-sizing: border-box.

С box-sizing: border-box отступы и границы (но не поля) учитываются в длине содержимого.

body {
  margin: 0;
  background-color: lightcyan;
}

/* NEW */
* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  padding: 8px; /* NEW */
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}
<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

person Michael Benjamin    schedule 22.10.2017
comment
это работает как по волшебству! Но что означает * в * { box-sizing: border-box;}? Я новичок в веб-разработке, и это мое первое знакомство с ним. - person reiallenramos; 23.10.2017
comment
Звездочка (*) — универсальный селектор. Это означает, что правило применяется ко всем элементам. developer.mozilla.org/en-US/docs/Web/CSS/ Универсальные_селекторы - person Michael Benjamin; 23.10.2017

arrow_upward
1
arrow_downward

Помимо установки поля для html, body на 0, единственное, что я нашел, что будет работать, это следующее:

html, body {
  height: 96vh;
}
person Xavier    schedule 22.10.2017
comment
спасибо за идею. 96vh дает слишком много полей внизу, поэтому я пока буду использовать 98vh. Ждем других идей - person reiallenramos; 22.10.2017

arrow_upward
1
arrow_downward

Вы должны вычесть дополнительную маржу из вашей обертки.

calc(100vh - 16px)

Тогда нет необходимости использовать 100% на теле.

person Rohit Verma    schedule 22.10.2017
comment
это 16 из-за поля по умолчанию 8 сверху и снизу? Спасибо за это. Я могу просто написать формулу для определения этой дополнительной маржи, чтобы избежать магических чисел. - person reiallenramos; 22.10.2017