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

Question

У меня есть макет с двумя колонками - слева находится div, а справа - другой div.

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

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

Answer 1

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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Answer 2

Вы можете использовать единицы измерения вьюпорта в CSS:

HTML:

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

CSS:

#my-div {
    height: 100vh; /* vh означает высоту вьюпорта, и 1vh равен 1% от высоты экрана */
}

В данном примере элемент #my-div будет иметь высоту, равную 100% высоты вьюпорта, что позволяет ему занимать всю доступную вертикальную область на экране.

Answer 3

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

Ширина макета фиксированная?
Является ли ширина одной или обеих колонок фиксированной?

Вот один из возможных вариантов реализации:

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; /* Ширина опциональна */
}

#left {
  background: yellow;
  float: left;
  width: 360px; /* Ширина опциональна, но рекомендуется */
}

#right {
  background: grey;
  margin-left: 360px; /* Должна совпадать с предыдущей шириной */
}

<html>
<head>
  <title>Пример</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Левая колонка
    </div>

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

</html>

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

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

3 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных