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

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

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

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

1944
задан Peter Mortensen 8 July 2019 в 23:32
поделиться

2 ответа

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

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

Вот одна возможность:

 body, div {margin: 0; граница: 0 нет; отступ: 0; } html, body, #wrapper, #left, #right {height: 100%; минимальная высота: 100%; } #wrapper {margin: 0 auto; переполнение: скрыто; ширина: 960 пикселей; // ширина необязательна} #left {background: yellow; плыть налево; ширина: 360 пикселей; // ширина необязательна, но рекомендуется} #right {background: gray; маржа слева: 360 пикселей; // должно соответствовать предыдущей ширине} 
    Пример    
Left < / div>

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

54
ответ дан 22 November 2019 в 20:02
поделиться

If you’re able to absolutely position your elements,

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

would do it.

273
ответ дан 22 November 2019 в 20:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: