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

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>

Check the height of your Navbar and subtract that height from the view-height height: calc(100vh - height-of-navbar) — Ifrah, Apr 11 '19 at 05:43
Well 100vh = 100% of viewPORT height. so 100% + something ( the navbar height ) is > 100% . So of course it overflows the viewport. — Mihai T, Apr 11 '19 at 08:23

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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:
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>

score 0 · Answer 2 · answered Apr 11 '19 at 05:25

0

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);
}

answered Apr 11 '19 at 05:25

100pic

387
3
13

This solution sounds simple enough but why does the logo shrink when I assign a height for the header? – Trav Apr 12 '19 at 04:27

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

2 Answers2

But you still have overflow - what now?