Футер и хедер должны быть всегда статичны, а высота дивов регулироваться автоматически, в зависимости от высоты окна. Как можно решить эту проблему?
.wrapper {
overflow: scroll;
height: 100%;
overflow-x: hidden;
}
.main {
display: flex;
height: 100%;
margin: 0% 10%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
header {
background-color: gray;
}
footer {
background-color: gray;
height: 12px;
}
li {
padding: 20px;
}
<body>
<div class="main">
<div class="container">
<header> Text
<div> 1 </div>
</header>
<div class="wrapper">
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
</li>
</ul>
</div>
<footer> </footer>
</div>
<div class="container">
<header> Text</header>
<div class="wrapper">
<ul>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
<li>
Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
</li>
</ul>
</div>
<footer>
</footer>
</div>
</div>
</body>