When using 100vh, it only works on mobile or if you narrow the width of your web browser on a PC. If the window/width is set at 100%, the image may appear too tall and cause the div class "mars" to overflow the viewport.
Unfortunately, screenshots cannot be posted at this time.
Below is the code snippet:
<div class="mars">
<img class="mars" src="img/marshero.jpg">
<div class="greet">
<a href="https://solarsystem.nasa.gov/planets/mars/overview/">
<p class="inf">Click here to learn more about Mars at solarsystem.nasa.gov</p>
</a>
</div>
<nav class="menu">
<ul class="inline">
<li class="inline"><a href="../index.html">▶About me</a></li>
<li class="inline"><a href="ProductDesign/index.html">Product design</a></li>
<li class="inline"><a href="Research/index.html">Research</a></li>
<li class="inline"><a href="ProductDevelopment/index.html">Product development</a></li>
</ul>
</nav>
</div>
div.mars {
min-height: 100vh;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
img.mars {
flex: 1 0 auto;
max-width: inherit;
max-height: inherit;
height: inherit;
width: inherit;
object-fit: cover;
}
/* nav */
nav.menu {
background-color: #f9eae2;
padding: 16px;
@media only screen and (max-width: 1050px) {
padding: 0px;
}
}
ul.inline {
text-align: center;
@media only screen and (max-width: 1050px) {
text-align: left;
}
}
li.inline {
display: inline;
padding-left: 16px;
@media only screen and (max-width: 1050px) {
display:list-item;
padding-top: 8px;
padding-bottom: 8px;
}
}