How can I prevent a 100vh image from expanding the viewpoint? - html

Question

For my #l-splash image, I'm having issues with the height: 100vh expanding past the viewpoint.
I have tried changing the overflow and different max-heights. I want my width to take up 100% of the left grid so it exactly takes up half of the screen. I suspect the problem is how my nav bar is stickied but I ideally need it to continue sticking to the top of the screen. Thanks for the help
https://jsfiddle.net/mtgcosxd/1/
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background: #2f6e84;
}
#l-splash {
width: 100%;
height: 100vh;
overflow: auto;
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>

Answer 1

You don't need to set height: 100vh on the image - as you are already having flexboxes and grids in your layout, you can inherit the heights using a column flexbox wrapper on body- here are the changes:
made you body a column flexbox and gave 100vh height,
allow the container to fill the remaining space left by the nav using flex: 1 on the container,
add height: 100% to the container of the img,
fill the image in its container using height: 100% and using object-fit,
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
/* made a flexbox */
display: flex;
flex-direction: column;
height: 100vh; /* full-height */
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr;
flex: 1; /* added */
}
.content {
grid-column: content;
background: #2f6e84;
}
.content > div {
height: 100%; /* added */
}
#l-splash {
width: 100%;
/*height: 100vh;*/
height: 100%;
object-fit: cover; /* added */
overflow: auto;
display: block; /* remove inline element whitespace */
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>
But you still have overflow - what now?
Add min-height: 0 to container so that you override the default min-height: auto for flex items in column direction,
You can see some examples of why you need to do this below:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Similarly min-height: auto for a grid item can be overridden using min-height: 0 on the content element
You can see some examples of why you need to do this below:
css-grid creates an imaginary column
How to make images stay within the rows of a css grid container?
See demo below:
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
/* made a flexbox */
display: flex;
flex-direction: column;
height: 100vh; /* full-height */
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr;
flex: 1; /* added */
min-height: 0; /* added */
}
.content {
grid-column: content;
background: #2f6e84;
min-height: 0; /* added */
}
.content > div {
height: 100%; /* added */
}
#l-splash {
width: 100%;
/*height: 100vh;*/
height: 100%;
object-fit: cover; /* added */
overflow: auto;
display: block; /* remove inline element whitespace */
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>

Answer 2

You can subtract the height of the nav/header from the height of the #l-splash div. E.g.
header {
...
height: 50px;
max-height: 50px;
}
#l-splash {
...
height: calc(100vh - 50px);
}
If your nav or other divs have margins, you may need to include those in your height calculation. E.g.
header {
...
height: 50px;
margin-bottom: 5px;
}
#l-splash {
...
height: calc(100vh - 55px);
}