Solution 1 :

You could easily use grid from : header/aside and main tags for the layout:

body {
  min-height: 100vh;
}

body,
header {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr minmax(auto,3fr) 200px 1fr;
  grid-template-rows: auto 1fr;
}

aside {
  grid-row: 1 / span 2;
  grid-column: 3;
  background: green;
  position: relative;
  width:200px;
}

header {
  background: yellow;
  grid-row: 1;
  grid-column: 1/ span 4;
  padding: 1em 0;
}

nav {
  grid-column: 2;
  max-width:800px;
}

main {
  grid-row: 2;
  grid-column: 2;
  max-width:800px;
  
}
<header>
  <nav>
  item 1 | item 2 | item 3
  </nav>
</header>
<aside class="sidebar">sidebar</aside><!-- removed from header -->
<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor urna at eros congue, vel consequat nisi fringilla. Suspendisse tempor consectetur luctus. Fusce eu nisi at tellus rhoncus eleifend. Duis aliquet sollicitudin elementum. Mauris eu
  elementum libero. Vivamus scelerisque ex eget faucibus aliquet. Morbi enim orci, elementum at ligula sed, sodales tempor elit. Phasellus mattis risus lorem, at vehicula nulla rhoncus vitae. Proin at elit ipsum. Mauris maximus sit amet mauris quis venenatis.
  Pellentesque at nisi egestas, pulvinar nibh eget, dictum urna. Vivamus malesuada, nisi cursus tristique venenatis, purus nisl congue tortor, vel tincidunt ante turpis id sapien. Pellentesque vel risus orci. Aliquam dictum massa eros. Nunc efficitur
  libero vitae convallis euismod. Donec ac suscipit arcu. Suspendisse placerat metus justo, eget finibus diam pharetra a. Duis vel erat diam. Mauris a erat vel ex tempor tincidunt eu in erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  Quisque rutrum posuere elit, mattis elementum arcu malesuada non. Pellentesque eget porta ipsum, sit amet lobortis nunc. Nullam tempor, felis eu rhoncus tempus, dui massa dictum dolor, sed finibus tellus quam vel eros. Quisque euismod elit sed imperdiet
  tincidunt. Duis in dapibus risus. Duis at neque nisi. In sapien erat, scelerisque eget nulla interdum, scelerisque ullamcorper eros. Suspendisse et accumsan diam. Vivamus commodo erat eu nunc condimentum condimentum. Cras sagittis mi vel tellus suscipit
  convallis. Mauris lobortis magna a fringilla rhoncus. Proin euismod purus quis velit luctus, at volutpat diam lobortis. Nunc pretium felis vel tortor euismod, a auctor magna consequat. Sed et turpis consequat, varius justo vitae, laoreet ex. Quisque
  accumsan condimentum metus, nec suscipit risus vestibulum elementum. Donec condimentum elementum tincidunt. Phasellus vel nulla pulvinar, posuere nisl a, pellentesque risus. Suspendisse lobortis, velit eu ultricies aliquam, lorem nibh tempus lectus,
  et varius tellus ex eu dui. Nam sed ultricies augue, vel porttitor tellus. Donec ex dolor, vestibulum at enim nec, porta pharetra nulla. Praesent molestie eu mauris ut cursus. Duis nec erat erat. Aenean auctor pretium quam, ut blandit libero tempor
  luctus. Integer est nisi, tristique eu viverra eget, sodales vel nunc. Nunc fermentum sollicitudin facilisis. Nam malesuada, nisl vel ultrices egestas, ligula leo euismod ipsum, non posuere libero diam sit amet erat. Etiam dolor turpis, suscipit vel
  maximus et, pharetra eu dolor. Donec a efficitur est. Integer lacinia ligula in ipsum dapibus sagittis. Duis placerat diam sed erat egestas, eget imperdiet massa dignissim. Ut lacinia viverra leo a vestibulum. Quisque lobortis, sapien ac luctus feugiat,
  nunc sem congue odio, at consequat sem lacus at magna. Etiam quis arcu eget odio hendrerit tempus quis a ex. Etiam id aliquet nisi. Praesent luctus, lacus nec aliquam blandit, sapien sapien porta orci, sed feugiat enim velit accumsan velit. Vestibulum
  pellentesque orci et justo elementum congue. Donec ultricies felis dui, quis luctus lectus pretium vitae.
</main>

Problem :

I have a page with a header with nav, a righthand sidebar and a main content area. The height of the header will vary with its width always being 100%.

The desired behavior is for the sidebar to span from the very top of the page to very bottom (or down to the footer at least).

In order to be able to get the sidebar to start at the top of the page, I created it as an absolutely positioned element and placed it in the header (at the end of the nav). To get it to span the entire height of the page, I set its height to 100vh.

This works fine as long as the page does not scroll. Once the content is long enough such that the page has to scroll, the sidebar no longer extends to the bottom of the page.

My issue can be seen in this Codepen and below

CSS

nav, main {
  width: auto;
  max-width: 800px;
}

header {
  background: yellow;
  padding: 20px;
}

nav {
  position: relative;
}

main {
  padding-right: 225px;
  box-sizing: border-box;
  min-height: 150vh;
}

.sidebar {
  width: 200px;
  background: green;
  position: absolute;
  right: 10px;
  top: -20px;
  height: 100vh;
}

HTML

<header>
  <nav>item 1 | item 2 | item 3
  <div class="sidebar">sidebar</div></nav>
</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor urna at eros congue, vel consequat nisi fringilla. Suspendisse tempor consectetur luctus. Fusce eu nisi at tellus rhoncus eleifend. Duis aliquet sollicitudin elementum. Mauris eu elementum libero. Vivamus scelerisque ex eget faucibus aliquet. Morbi enim orci, elementum at ligula sed, sodales tempor elit.
</main>

Can anyone think of a way to get that sidebar to display all the way from top to bottom (even when the page scrolls) using CSS only without having to add multiple sidebar elements (one in <header> and one in <main>)?

Comments

Comment posted by Matan Sanbira

try

Comment posted by Stefan

You could also try

Comment posted by Daveh0

@Stefan – in order to get the sidebar to display at the correct horizontal position at different window sizes, I had to nest it in the

Comment posted by Daveh0

@MatanSanbira – can’t use fixed… it’s contents have to scroll with the page.

Comment posted by Daveh0

question edited – please re-open

Comment posted by Daveh0

that’s close, however the sidebar must overlap the header. Since the header is of unknown height, placing the sidebar inside it is the only way I can figure to get it to overlap. Pulling it out of the header as you did in your example positions the sidebar below the header, which won’t meet my requirements.

Comment posted by G-Cyrillus

@Daveh0 grid might be wiser than flex then , i updated answer . 😉

Comment posted by Daveh0

Awesome, thx! Now I just need to hope it can be implemented into my WordPress theme.

By