CODEWITHSUNDEEP
htmlcsszurb-foundation
Arjun Naha
Arjun Naha

Reputation: 120

Foundation 5 - div fill height

I am trying to fill my sidebar div so the blue background fills the screen. Foundation makes this slightly tricky (I have tried height:100%;)

Screenshot

http://codepen.io/ZURBFoundation/pen/olduj

<ul class="side-nav" link="white">
<li class="active"><a href="#">

Upvotes: 4

Views: 1365

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240968

I can think of three different ways to achieve this.

  • Set the height of the parent elements (body/html) to 100%. In doing so, you can set the child's height to 100%.

    html, body, .side-nav { height: 100%; }

  • Use viewport percentage lengths. In this case you would use 100vh.

    .side-nav { height: 100vh; }

  • Absolutely position the element and specify a top/bottom value of 0.

    .side-nav { position: absolute; top: 0; bottom: 0; }

    If that doesn't work, you would have to try fixed positioning. (It's worth pointing out that fixed positioning is relative to the window, whereas absolute positioning is relative to the closest non-staticly positioned parent element.)

Upvotes: 4

Related Questions