Как установить высоту контейнера DIV на 100% высоты окна?

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

Я также хотел бы, чтобы контейнер DIV всегда заполнял доступную высоту экрана/окна. Я попытался установить его на min-height:100%, но это не имело никакого эффекта.

Вот CSS, который я использую для контейнера DIV:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

Буду благодарен за любую помощь, чтобы эта работа работала.

Спасибо,

Ник

Ответ 1

Добавьте это в свой css:

html, body {
    height:100%;
}

Если вы говорите, что высота: 100%, вы имеете в виду "100% родительского элемента". Если родительский элемент не имеет указанной высоты, ничего не произойдет. Вы устанавливаете только 100% на тело, но вам также нужно добавить его в html.

Ответ 2

Вы установили CSS:

html, body
{
    height: 100%;
}

Вам нужно это, чтобы заставить div заняться всем пространством.:)

Ответ 3

Вы можете настроить сеть для просмотра высоты

html, body
{
    height: 100vh;
}

Ответ 4

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

html height (%) будет следить за высотой документов, которая height больше, чем 100% screen view, а body view height (vh) будет следить за высотой документа, которая меньше высоты экрана.

Ответ 5

Я думал над этим и экспериментировал с высотой элементов: html, body и div. Наконец-то я придумал код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
	html {height: 50%; border: solid red 3px; }
	body {height: 70vh; border: solid green 3px; padding: 12pt; }
	div {height: 90vh; border: solid blue 3px; padding: 24pt; }
	
</style>
</head>
<body>

	<div id="container">
		<p>&lt;html&gt; is red</p>
		<p>&lt;body&gt; is green</p>
		<p>&lt;div&gt; is blue</p>
	</div>

</body>
</html>