Challenge getting a full-height sidebar

I’m trying for a traditional layout with a header at the top of the page, a footer at the bottom, between which are a sidebar and a content area taking up all the remaining height. Based on the “Vertical Grid” section of the docs, I’ve gotten it working, but only by adding the single inline style shown below. This feels wrong. Is there a way of doing this without the inline style, or should I shrug and move on?

<div class="grid-y medium-grid-frame">                           
  <div class="cell shrink header medium-cell-block-container">   
    <h1>Header</h1>
  </div> 
  <div class="cell medium-auto medium-cell-block-container">     
    <div class="grid-x grid-padding-x">                          
      <div class="two cell medium-2 medium-cell-block-y" style="height:100vw">
        <h2>Sidebar</h2>
      </div>     
      <div class="three cell medium-10 medium-cell-block-y">     
        <h2>Content</h2>                      
      </div>
    </div>
  </div>
  <div class="one cell shrink footer">
    <h3>Footer</h3>
  </div>
</div>

The “one”, “two”, and “three” classes above put different color boxes around the elements, which is how I can tell how high the sidebar is.

See https://github.com/foundation/foundation-sites/issues/10766, you might need such a helper class in such complicated cases. Or refactor the nested grids to a different structure (mixing grid-y, grid-x and grid-frame).

Also see https://github.com/foundation/foundation-sites/issues/10457

I have created a working example for you, please take a look at https://codepen.io/DanielRuf/pen/abvyYdj

Thanks! That does what I want.

Comparing my code with yours, I had the inline style applied to the sidebar cell instead of its enclosing grid-x. I’m not sure why I came away from reading the docs with the impression that the height needed to apply to the cell. Maybe it was seeing style="width:80vw" being applied to a cell in the Grid Frame example.

Now, oddly, if instead of height: 100%, I have the helper do height: 100vh or height: 100vw (!), I also get the effect I want. I’ll leave that mystery to someone who is more CSS proficient.

The outermost element which constraints the height has to be set to height: 100% in this case. The inner elements grow and take the available height by default. Still, 100% is better as 100vh is the height of the visible part of the browser window (the complete <body>), and 100vw the width of it. This is unrelated to the outer element or elements at all.

See https://codepen.io/DanielRuf/pen/ZEbJxrR and how long you can scroll it.

Yup. vh and vw are just shorthands that produce an untyped number. An accident of geometry that I didn’t notice that mistake immediately.