Коробка 100vh не занимает всю страницу - PullRequest
Новая
       1

Коробка 100vh не занимает всю страницу

0 голосов
/ 17 декабря 2018

У меня есть 3 коробки внутри контейнера, и я пытаюсь иметь одинаковую высоту для каждой коробки, но одна height 100vh или height : 100% работает неправильно.У тебя есть идеи почему?Я попробовал другой браузер и ОС, и у меня все тот же результат.Зеленая коробка не достигает желаемой высоты.

/* ALL SETTINGS */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: var(--size-box);
  -moz-box-sizing: var(--size-box);
  box-sizing: var(--size-box);
}

html,
body {
  margin: 0;
  height: 100%;
}




.wrapper {

  max-width: 100%;
  height: 100vh;
}

.wrapper .box {
  width: 100%;
  height: 100vh;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}
<html>
  <body>

    <div class="wrapper">
         <div class="box">
          </div>
         <div class="box">
          </div>
         <div class="box">
         </div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 17 декабря 2018

А как насчет этого?Добавление ширины 33% к блокам и создание их в виде встроенных блоков выравнивает их по горизонтали.Я удалил правило *, потому что оно слишком агрессивно.Использование слишком агрессивных правил без ясного намерения кажется плохой практикой.

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  max-width: 100%;
  height: 100vh;
  padding: 0;
}

.wrapper .box {
  width: 33%;
  height: 100vh;
  display: inline-block;
  margin: 0;
}

.box:nth-child(1){
  background-color: blue
}

.box:nth-child(2){
  background-color: green
}

.box:nth-child(3){
  background-color: red
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...