Ситуация такая:
Изначально не мог сделать блок body
на всё окно браузера (который, как я понимаю, должен быть изначально растянут по краям окна браузера), эта проблема решилась использованием свойства min-height: 100vh;
Внутри блока body
у меня есть блок main
который я также хочу растянуть на все окно. С этим опять же может помочь min-height: 100vh;
Но 100vh это размер относительно окна, а когда я пишу min-height: 100%
то между низом окна (и получается границей блока body
) и границей блока main
появляется огромная пустая область, хотя по идее т.к я использую % он должен расположить блок main по всей высоте блока body и данной области быть не должно... Также пустая область исчезает если увеличить контент внутри блока main (как раз таки, за счет увеличения области блока main). Подскажите пожалуйста из-за чего эта пустая область появляется?
body {
background: #ffe3e3;
margin: 0px;
min-height: 100vh;
}
nav {
position: fixed;
background: #3604bf;
width: 100%;
height: 60px;
top: 0px;
}
main {
background: #ff9ebb;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
width: 1000px;
min-height: 100%;
height: 100%;
}
img {
width: 50px;
height: 50px;
}
article {
margin: auto;
}
#container-latin {
margin-top: 10px;
}
#container-standart {
margin-top: 10px;
}
h1 {
margin: auto;
}
<nav>
<h4>h4</h4>
</nav>
<main>
<h1>h1</h1>
<div id="container-latin">
<article>
<h3>h3</h3>
<img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
</article>
<article>
<h3>h3</h3>
<img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo ">
</article>
<article>
<h3>h3</h3>
<img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
</article>
</div>
<div id="container-standart">
<article>
<h3>h3</h3>
<img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo ">
</article>
<article>
<h3>h3</h3>
<img src="http://via.placeholder.com/50x50/33ff99/555555?text=foto" alt="photo">
</article>
</div>
</main>