Css sidebar height 100% in foundation

Question

I'm using the grid system in the foundation framework, with a sidebar and content area. I want to extend the height of the sidebar navigation based on the content of main part (small-10):

<div class="row">
    <div class="small-2 columns">
        <div id="side-nav">
            <ul>
                ...
            </ul>
        </div>
    </div>
    <div class="small-10 columns">
        @RenderBody()
    </div>
</div>

I've tried:

#side-nav
    {
        height:100%;
        background:#f0f0f0;
    }

Try this post http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height — Rakesh Kumar, Feb 18 '14 at 05:26

score 0 · Answer 1 · answered Feb 18 '14 at 05:22

0

If you want two columns to be the same height, that is one case where I would still use <table>'s

answered Feb 18 '14 at 05:22

ThorSummoner

16,657
15
135
147

score 0 · Answer 2 · answered Feb 18 '14 at 05:24

0

set css

   #side-nav
   {
    display:block;
   }

answered Feb 18 '14 at 05:24

Sebin Simon

1,596
2
17
28

can u give fiddle or ur site link – Sebin Simon Feb 18 '14 at 05:31
http://jsfiddle.net/R3e8P/ row ans small-2 and 10 are foundation frameworks classes – neel Feb 18 '14 at 05:47
do u want like this http://jsfiddle.net/sebin/52KLV/ ? increase previe window width – Sebin Simon Feb 18 '14 at 06:22

Css sidebar height 100% in foundation

2 Answers2