Kevin Powell - Community•17mo ago

How to set dynamically 100vh on a section minus the nav above ?

Hey guys, so here is the codepen link https://codepen.io/noobcoder137/pen/VwBozdY; I have a <nav>, <main> and a <section> below other and I want to make my <main> 100vh but minus the <nav> so that I immediately see the next section when I scroll a little bit down. I thought setting the height of <main> to 100dvh but it does not work. The only solution I came up with so far is putting the <nav> inside the <main>, but I don’t want it to be nested.

2 Replies

MarkBoots•17mo ago

without setting a defined height on the nav, or wrapping them together, I don't think it's possible. you could use js to get the height of the nav and subtract it from main I would prefer the wrapping, but if you want to do it with js

function getNavHeight(){
  const nav = document.querySelector("nav");
  const navHeight = nav.getBoundingClientRect().height;
  document.body.style.setProperty("--nav-height", navHeight + 'px');
}

getNavHeight();
window.addEventListener("resize", getNavHeight);

function getNavHeight(){
  const nav = document.querySelector("nav");
  const navHeight = nav.getBoundingClientRect().height;
  document.body.style.setProperty("--nav-height", navHeight + 'px');
}

getNavHeight();
window.addEventListener("resize", getNavHeight);

main {
  min-height: calc(100vh - var(--nav-height));
}

main {
  min-height: calc(100vh - var(--nav-height));
}

Internet_Rambo137•17mo ago

Yeah you’re right. Thanks a lot

Gaming

Programming

How to set dynamically 100vh on a section minus the nav above ?