Как сделать div на 100% высоты окна браузера

У меня есть макет с двумя столбцами - слева divи справа div.

Справа divесть серый background-color, и мне нужно, чтобы он расширялся по вертикали в зависимости от высоты окна браузера пользователя. Прямо сейчас background-colorзаканчивается последний кусок контента в этом div.

Я пробовал height:100%, min-height:100%;и т.д.

15.10.2009 21:18:43
Может быть, вы найдете этот вопрос полезным stackoverflow.com/questions/1366548/…
Ivan Nevostruev 15.10.2009 21:20:54
Хороший способ, но единицы VH, VW и т.д., как известно, глючат. Есть такая легкая альтернатива js, если вам это нужно: joaocunha.github.io/vunit
see sharper 1.06.2015 02:57:33
Вот простое и ясное объяснение heightсвойства CSS с процентными значениями: stackoverflow.com/a/31728799/3597276
Michael Benjamin 25.08.2015 21:22:54
Вы можете использовать высоту: 100vh; css property
Vishnu Chauhan 4.09.2018 05:16:23
30 ОТВЕТОВ

Если вы в состоянии абсолютно позиционировать свои элементы,

position: absolute;
top: 0;
bottom: 0;

сделал бы это.

281
22.05.2014 23:33:36
Это работает путем удаления элемента из потока документов и закрепления его нижнего значения до высоты его родительского элемента. Это не идеально, когда ваш контент превышает высоту своего родителя.
Ricky Boyce 18.12.2014 04:23:39
Это не работает, когда один из его родителей установлен в положение, position:relativeи его высота не равна 100% области просмотра. Он отрегулирует верх и низ к своему следующему относительному или абсолютному предку.
Seika85 1.07.2016 14:39:46

Вы не упоминаете несколько важных деталей, таких как:

  • Является ли макет фиксированной ширины?
  • Фиксированная ширина одного или обоих столбцов?

Вот одна из возможностей:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Есть много вариантов этого в зависимости от того, какие колонки должны быть зафиксированы, а какие - жидкие. Вы можете сделать это и с абсолютным позиционированием, но в целом я нашел лучшие результаты (особенно с точки зрения кроссбраузерности), используя вместо этого float.

54
9.02.2016 12:29:22

Добавьте min-height: 100%и не указывайте высоту (или ставьте ее на авто). Это полностью сделало работу за меня:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
17
30.10.2013 16:32:04

Если вы хотите установить высоту элемента <div>или любого другого элемента, вы должны также установить высоту <body>и <html>на 100%. Тогда вы можете установить высоту элемента на 100% :)

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
565
22.10.2013 01:40:19
Поправьте меня, если я ошибаюсь, но я думаю, что вам также нужно установить рост для всех родителей div, чтобы на самом деле работать
Dany Y 28.03.2013 11:05:29
Это не сработает, если я использую продолжение дизайна: высота страницы 6000px, с блоками, представляющими страницы. Я хочу, чтобы один блок точно соответствовал высоте окна просмотра.
Qwerty 21.12.2013 20:31:41
@DanyY, ты прав. Вам нужно установить высоту для всех родителей div, с учетом всего, что имеет высоту экрана. Вот пример .
toto_tico 2.01.2014 07:31:44
Этот прием работает в некоторых случаях, но не в некоторых случаях. Если вы ищете совместимость или более рекомендуемый способ, вы можете просмотреть ответ @ James выше :) Используя метод Viewport Percentage :), это тоже должно работать. ура
Ariona Rian 19.02.2014 06:00:32
@ Quwerty, вот решение. Набор CSS , как так: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Так что, если у вас есть 3 раздела, это будетhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }
cameronjonesweb 12.03.2014 11:55:50

Попробуйте это - проверено:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}
5
7.09.2017 13:33:36

Несмотря на то, что это решение сделано с помощью jQuery I, оно может быть полезным для тех, кто делает столбцы по размеру экрана.

Для столбцов, начинающихся вверху страницы, это решение является самым простым.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Для столбцов, которые не начинаются вверху страницы (например, если они начинаются ниже заголовка).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

Первый метод применяет высоту тела к нему, а также к столбцам, что означает, что start_pixels + height100%.

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

0
30.10.2013 16:33:25
Я сделал несколько правок, но это отличный способ получить размер окна, равный размеру окна, и динамически хорошо работать. 100% будет отображаться только один раз, поэтому несколько экранов не работают. Я бы добавил $ (window) .resize (function () {также. Выглядит так же, как и минус того, что я добавил.
Rob 20.05.2013 15:33:59
Нет необходимости в JavaScript. Современное решение - использовать гораздо более простую модель CSS flex box .
Dan Dascalescu 6.11.2014 19:43:18

Существует несколько единиц измерения CSS 3, которые называются:

ВЭкран-проценты (или ВЭкран-Относительные) Длины

Что такое длина просмотра в процентах?

Из приведенной выше рекомендации кандидата W3:

Длина области просмотра в процентах относительно размера исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.

Этими единицами являются vh(высота области просмотра), vw(ширина области просмотра), vmin(минимальная длина области просмотра) и vmax(максимальная длина области просмотра).

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

Для этого вопроса мы можем использовать vh: 1vhравно 1% высоты области просмотра. То есть 100vhравна высоте окна браузера независимо от того, где находится элемент в дереве DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Это буквально все, что нужно. Вот пример использования JSFiddle .

Какие браузеры поддерживают эти новые модули?

В настоящее время это поддерживается во всех современных основных браузерах, кроме Opera Mini. Проверьте Могу ли я использовать ... для дальнейшей поддержки.

Как это можно использовать с несколькими столбцами?

В случае рассматриваемого вопроса с левым и правым делителем, вот пример JSFiddle, показывающий макет с двумя столбцами, включающий оба vhи vw.

Чем 100vhотличается от 100%?

Возьмите этот макет например:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

pТег здесь установлен на 100% высоты, а потому , что она содержит divимеет высоту 200 пикселей, 100% 200 пикселей становится 200 пикселей, а не 100% от bodyвысоты. Использование 100vhвместо означает, что pтег будет 100% высоты bodyнезависимо от divвысоты. Взгляните на этот сопровождающий JSFiddle, чтобы легко увидеть разницу!

2809
8.07.2019 23:34:17
Странное поведение при прокрутке, когда элемент на самом деле выше окна просмотра. Контейнер поддерживает высоту области просмотра, и содержимое вытекает из контейнера. min-height:100vhкажется, обойти это.
wdm 18.08.2013 09:07:17
@DGDD это работает на iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 и IEMobile 10.0. Я не знаю, какой мобильный браузер вы используете, но эти 4 составляют более 90% используемых мобильных браузеров. Этот вопрос не определяет требования для работы в мобильных браузерах.
James Donnelly 4.07.2014 15:56:53
@ robross0606 еще раз, это не тот вопрос, на который я здесь ответил. Это совсем другой вопрос, в ответе которого действительно используется flexbox: stackoverflow.com/questions/90178/…
James Donnelly 6.05.2015 21:14:16
@JamesDonnelly Да, я знаю. Но это не ответ на этот вопрос. Высота окна браузера включает в себя высоту панели навигации. Это было бы лучше, потому что в мобильных браузерах высота области просмотра изменяется каждый раз, когда панель навигации показывает / скрывает.
RedClover 1.09.2017 07:49:29
Мобильное оповещение: использование VH Mess с мобильным Chrome, который не учитывает его навигационную панель. Это тогда покрывает вершину Вашей страницы этим. Серьезная проблема, если у вас есть меню ...
Offirmo 22.02.2018 06:46:00

Это сработало для меня:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Взято с этой страницы .

12
8.07.2019 23:40:05

Все остальные решения, включая решение с наибольшим количеством голосов, vhявляются неоптимальными по сравнению с решением для гибкой модели .

С появлением гибкой модели CSS решение проблемы 100% высоты становится очень и очень простым: использование height: 100%; display: flexдля родительских и flex: 1дочерних элементов. Они автоматически займут все доступное пространство в своем контейнере.

Обратите внимание, насколько просты разметка и CSS. Нет таблицы взломов или что-нибудь.

Модель flex поддерживается всеми основными браузерами, а также IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Узнайте больше о гибкой модели здесь.

101
6.11.2014 19:47:15
предупреждение: когда содержимое одного из левого / правого контейнеров превышает исходную высоту тела, размер противоположного контейнера не изменится, поэтому контейнеры получат разные высоты.
schellmax 14.12.2015 07:55:43
Пример проблемы Schellmax указывает: jsfiddle.net/Arete/b4g0o3pq
Arete 12.09.2016 20:15:37
В зависимости от конструкции, overflow-y: auto;можно избежать «контейнеров превышает исходную высоту тела».
Evi Song 8.09.2018 08:54:25

Вот что сработало для меня:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

Используйте position:fixedвместо этого position:absolute, даже если вы прокрутите вниз, разделение расширится до конца экрана.

34
15.05.2019 14:54:07
Этот код с «position: [fixed | absolute]» отлично подходит для фона всплывающих окон (например, когда вы нажимаете, чтобы увеличить изображение), но не очень уверен в тех случаях, когда вам нужно прокрутить вниз. Еще полезное тесто!
Mannyfatboy 24.02.2020 11:23:20

Вот исправление для высоты.

В вашем CSS используйте:

#your-object: height: 100vh;

Для браузера, который не поддерживает vh-units, используйте modernizr.

Добавить этот скрипт (для добавления обнаружения vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Наконец, используйте эту функцию, чтобы добавить высоту области просмотра, #your-objectесли браузер не поддерживает vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
29
30.10.2013 16:33:10

Если вы используете position: absolute;и JQuery, вы можете использовать

$("#mydiv").css("height", $(document).height() + "px");
3
22.10.2013 01:36:50
Там нет необходимости для JavaScript. Современное решение заключается в использовании модели CSS flex box .
Dan Dascalescu 6.11.2014 19:42:38
Если вы используете JS, я нашел это весьма полезным. ПРИМЕЧАНИЕ: лучше использовать это с $ (window) .load (), так как вы получите разные результаты, возвращаемые с помощью F5 или CTRL + F5. Проверьте эту ссылку для получения дополнительной информации. stackoverflow.com/questions/13314058/…
edward 9.05.2016 15:27:21

Самый простой:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>

1
30.03.2015 22:41:19
Довольно сложный. Современное решение - использовать гораздо более простую модель CSS flex box .
Dan Dascalescu 6.11.2014 19:43:02

Используйте FlexBox CSS

Flexbox идеально подходит для решения подобных задач. Хотя Flexbox в основном известен тем, что размещает контент в горизонтальном направлении, он на самом деле работает также и для задач вертикального размещения. Все, что вам нужно сделать, это обернуть вертикальные секции в гибкий контейнер и выбрать, какие из них вы хотите расширить. Они автоматически займут все доступное пространство в своем контейнере.

6
12.05.2015 00:35:37

Вам нужно сделать две вещи, одна из них - установить высоту на 100%, что вы уже сделали. Второе - установить абсолютное положение. Это должно делать свое дело.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Источник

5
11.05.2018 12:31:55
Устаревшее решение. Используйте vhвместо этого.
avalanche1 4.02.2016 10:09:30
Не используйте, vhесли вы планируете использовать адаптивный дизайн на мобильных устройствах.
Alexander Kim 23.05.2019 16:51:39

Одним из вариантов является использование таблицы CSS. Он имеет отличную поддержку браузера и даже работает в Internet Explorer 8.

Пример JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

6
8.07.2019 23:41:38

Попробуйте установить height:100%в html&body

html, 
body {
    height: 100%;
}

И если вы хотите, чтобы высота 2 div одинакова, используйте или установите display:flexсвойство родительского элемента .

11
7.09.2017 13:29:33

Вы можете использовать модуль view-port в CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
139
8.07.2019 23:35:11
@ Lamar Вы должны использовать, * { box-sizing: border-box; }чтобы предотвратить это.
Luca Steeb 22.01.2017 20:01:08
Стоит проверить caniuse для поддержки браузера на устройствах просмотра: caniuse.com/#feat=viewport-units
Dave Everitt 15.02.2017 17:32:38

Есть несколько методов для установки высоты <div>до 100%.

Метод (А):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

Метод (B) с использованием VH:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

Метод (с) с использованием гибкой коробки:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

12
14.02.2017 13:12:29

Попробуйте следующий CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
5
8.07.2019 23:42:27

Вы можете использовать vhв этом случае, который составляет 1% от высоты области просмотра ...

Это означает, что если вы хотите скрыть высоту, просто используйте 100vh.

Посмотрите на изображение ниже, которое я рисую для вас здесь:

Как сделать div на 100% высоты окна браузера?

Попробуйте фрагмент, который я создал для вас, как показано ниже:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>

132
17.09.2019 08:20:58
Предоставление 100vh добавило вертикальную прокрутку для страницы, поэтому следовало за этим, но не работало. stackoverflow.com/questions/44645465/… . Есть ли способ избежать вертикальной прокрутки и сделать так, чтобы div касался дна без какого-либо содержимого?
DILEEP THOMAS 19.11.2019 05:57:16
@DILEEPTHOMAS искать существующиеpaddings/margins
Legends 12.12.2019 15:41:39
@ Легенды в корневом файле, который я пытался указать как * {margin: 0, padding: 0}, но не сработал
DILEEP THOMAS 13.12.2019 06:44:31
@DILEEPTHOMAS посмотрите на этот пример, предоставленный Alireza, он также имеет полосу прокрутки, потому что элемент body имеет поле. Если вы удалите поле, полоса прокрутки исчезнет. У этого могут быть разные причины, но эту я хотел бы проверить первым.
Legends 13.12.2019 08:35:54

Вот что-то, что не совсем то, что вы имели в предыдущих ответах, но может быть полезно для некоторых:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

7
8.07.2019 23:52:05

100vw === 100% ширины области просмотра.

100vh === 100% высоты окна просмотра.

Если вы хотите установить divширину или высоту 100% от размера окна браузера, вы должны использовать:

Для ширины: 100vw

Для высоты: 100vh

Или, если вы хотите установить его меньший размер, используйте calcфункцию CSS . Пример:

#example {
    width: calc(100vw - 32px)
}
16
8.07.2019 23:38:36

Блочные элементы по умолчанию используют всю ширину своего родителя.

Это то, как они отвечают их требованиям к дизайну, а именно, к вертикальной укладке.

9.4.1 Блочные контексты форматирования

В контексте форматирования блока блоки располагаются один за другим вертикально, начиная с верхней части содержащего блока.

Это поведение, однако, не распространяется на высоту.

По умолчанию большинство элементов имеют высоту их содержимого ( height: auto).

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

Поэтому имейте в виду эти две вещи:

  • если вам не нужна полная ширина, вам нужно определить ширину блочного элемента
  • если вы не хотите высоту содержимого, вам нужно определить высоту элемента

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

7
14.11.2017 18:06:57

Вы можете использовать display: flexиheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

5
29.10.2017 06:55:14
Уже опубликовано несколько решений flexbox, в том числе одно с этой точной реализацией, опубликованное всего за 26 дней до ответа.
TylerH 3.01.2018 18:02:52

Просто используйте модуль «vh» вместо «px», что означает высоту порта просмотра.

height: 100vh;
8
8.07.2019 23:40:37

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>
2
8.07.2019 23:45:08
Возможные опечатки: widht(ближе к концу)
Peter Mortensen 8.07.2019 23:46:15

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

Вы должны настроить только height:100%.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

2
8.07.2019 23:53:51

На самом деле, то, что работало для меня лучше всего, это использование vhсобственности

В моем приложении React я хотел, чтобы div совпадал с высотой страницы даже при изменении размера. Я пытался height: 100%;, overflow-y: auto;но ни один из них не работал, когда настройка height:(your percent)vh;работала как задумано.

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

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
5
8.07.2019 23:50:32
Кстати, вы упомянули «закругленные углы», влияющие на высоту вашего элемента, я ожидаю, что настройка box-sizing: border-box;преодолеет это, это означает, что размер границы также учитывается при расчете размера (ширины и высоты) элемента.
Neek 15.06.2019 14:28:29

Вы можете использовать следующий CSS, чтобы сделать div на 100% высоты окна браузера:

display: block;
position: relative;
bottom: 0;
height: 100%;
0
8.09.2018 00:24:18