У меня есть пара проблем с моим контейнером DIV. Во-первых, он неправильно распознает высоту моего контента (я бы подумал, что он будет выходить за пределы основного содержимого и боковой панели, но это не так). Вы можете видеть, что я имею в виду эту страницу.
Я также хотел бы, чтобы контейнер DIV всегда заполнял доступную высоту экрана/окна. Я попытался установить его на min-height:100%, но это не имело никакого эффекта.
Вот CSS, который я использую для контейнера DIV:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
min-height: 100%;
}
Буду благодарен за любую помощь, чтобы эта работа работала.
Спасибо,
Ник
Добавьте это в свой css:
html, body {
height:100%;
}
Если вы говорите, что высота: 100%, вы имеете в виду "100% родительского элемента". Если родительский элемент не имеет указанной высоты, ничего не произойдет. Вы устанавливаете только 100% на тело, но вам также нужно добавить его в html.
Вы установили CSS:
html, body
{
height: 100%;
}
Вам нужно это, чтобы заставить div заняться всем пространством.:)
Вы можете настроить сеть для просмотра высоты
html, body
{
height: 100vh;
}
html {
min-height: 100%;
}
body {
min-height: 100vh;
}
html height (%) будет следить за высотой документов, которая height больше, чем 100% screen view, а body view height (vh) будет следить за высотой документа, которая меньше высоты экрана.
Я думал над этим и экспериментировал с высотой элементов: 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><html> is red</p>
<p><body> is green</p>
<p><div> is blue</p>
</div>
</body>
</html>