Making a div float to the bottom of a static nav element

Question

I have the following Bootstrap based code:

<div id="sidebar-wrapper" class="collapse sidebar-collapse">
    <nav id="sidebar">
       <ul id="main-nav" class="open-active">
           ....
       </ul>
    </nav>
</div>

Here is the CSS for #sidebar:

#sidebar {
  width: 100%;
  float: none;
  position: static;
}

This creates a nice sidebar that stretches from top to bottom. However, I can't seem to figure out how to add a div that rests at the very bottom of the sidebar.

A screenshot of what I mean:

enter image description here

Here is the code for that Test Div in the screenshot:

<div style="position: absolute; bottom: 0;">
    Test Div
</div>

See this answer - http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom/27812717#27812717 — Josh Crozier, Jan 07 '15 at 05:05

score 0 · Answer 1 · answered Jan 07 '15 at 04:54

0

Try adding your div within the sidebar, and for your CSS put:

    .div {
      position: absolute;
      bottom: 0;
     }

answered Jan 07 '15 at 04:54

Rachael Thompson

1
2

Already tried that. I added a screenshot of what I am trying to do. The "Test Div" I have injected that you see in that shot is using this same CSS. – eComEvo Jan 07 '15 at 04:54
Change your sidebar from "position: static;" to "position: relative;" It should work then. – Rachael Thompson Jan 07 '15 at 04:58

score 0 · Answer 2 · answered Jan 07 '15 at 04:58

0

You can't change #sidebar to position:relative? That should make the absolute positioning work.

answered Jan 07 '15 at 04:58

UnknownDeveloper

445
1
4
10

James Taylor · Accepted Answer · 2015-01-07T05:15:34.583

If the sidebar fills up 100% of the page's height, you can create a wrapper that is absolute positioned in the sidebar with the bottom property set to 0px.

This should look something like this:

.wrapper {
    position: absolute;
    bottom: 0;
}

And it's straight from this example. As another commenter already pointed out, you might have to change the static positioning of the parent #sidebar element.

To my knowledge this would be the only non-Javascript approach, but it will only work if the sidebar is at 100%.

Notable alternative option using JavaScript:

Let's say you know the heights of all the elements you are working with. You could then simply adjust the margin-top property of div element to be placed at the bottom.

This would look something like this:

window.onload = function() {
    var header = document.getElementById("heading");
    var bottom = document.getElementById("bottom");
    var height = document.body.scrollHeight;

    bottom.style.marginTop = (height - header.clientHeight) + 'px';

}

I hope this helps!

Edit:

Now that I think about this more, this is a perfect use case for the calc() CSS3 function. You might want to check it out.

Using this has a few caveats, like if you don't know the height of the content in the bottom-positioned div 100% of the time or if you care about cross-compatibitly problems (although I would say it has pretty good support).

This code would look something like this:

.bottom {
    /* should be moved down a distance equal to the height of
       parent container minus the height of the bottom div
       and the div above it */
    margin-top: calc(100% - (20px + 40px));
}

Check out these neat use cases to see if this is an option you would want to consider exploring further.

Making a div float to the bottom of a static nav element

3 Answers3