CODEWITHSUNDEEP
htmlcss
droo46
droo46

Reputation: 114

Make side nav to have same height as content

I'm trying to get my right side navigation div to occupy the remaining vertical space based upon the size of the content box. I've tried setting the height of the body and the div to 100%, absolute positioning, and crying and none of those options seem to get me the desired results.

Here's the Fiddle I've been using as a proof of concept: https://jsfiddle.net/5punpLs6/

#nav {
    float: right;
    background-color: blue;
    height: 100%;
}
#content {
    background-color: #333;
    overflow: hidden;
}
#footer {
    background-color: green;
    height: 50px;
}
<div id="nav">
    <ul>
        <li>home</li>
        <li>home</li>
        <li>home</li>
    </ul>
</div>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
</div>
<div id="footer"></div>

Upvotes: 0

Views: 360

Answers (2)

Stickers
Stickers

Reputation: 78686

Percentage height like height:100% only work only if the the parent has a known height. In your case you might not need it if you only need the background color to cover the whole area, so you'll just need to wrap nav and content into a wrapper, and set the background on it.

JsFiddle Demo

#wrapper {
    background-color: blue;
}
#nav {
    float: right;
}
#content {
    background-color: #333;
    overflow: auto;
}
#footer {
    background-color: green;
    height: 50px;
}
<div id="wrapper">
    <div id="nav">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
    </div>
</div>
<div id="footer"></div>

Or use CSS table layout, that will ensure both content and nav to have exactly the same height. Note, reorder the markup slightly.

JsFiddle Demo

#wrapper {
    display: table;
    border-collapse: collapse;
}
#content, #nav {
    display: table-cell;
    vertical-align: top;
}
#content {
    background-color: #333;
}
#nav {
    background-color: blue;
}
#footer {
    background-color: green;
    height: 50px;
}
<div id="wrapper">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
    </div>
    <div id="nav">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>
<div id="footer"></div>

Upvotes: 1

pablito.aven
pablito.aven

Reputation: 1165

You have two options: One is as already have been said, adding a container. I think the cleanest thing to do is to always have things wrapped inside a container.

If somewhy you don't want to add this container, you could just execute some JQuery after web has been load(without adding extra html). For this you should include jquery 

window.onload = function(){
    $('#nav').height($('#content').height());
}

I tried this in your JSFiddle and it seems to do what you wanted.

Otherwise, you could try using some already made side navbar. Don't try to reinvent the wheel, if somebody else has already done it, it can save you a lot of time. This is a nice one I have used in some of my websites

Upvotes: 1

Related Questions