How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?

Question

I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.

The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.

This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.

Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.

Is this [close enough](http://jsbin.com/iqibew/4/)? I've made some changes you may not want, but I don't know if there's a way to do what you're wanting with `top` offset. — Jared Farrish, Mar 27 '13 at 01:22
I'm trying to figure out exactly what you did. I'm trying to avoid changing the styles of containers like `` and `` but so far it still seems to work if I remove those stylings. — Jonathan Wood, Mar 27 '13 at 01:28
I was going in a different direction with that. I set the `bottom` and `top` to `0` and `margin-top: 120px;` to get what you wanted. — Jared Farrish, Mar 27 '13 at 01:28
I think you do actually need `html, body height: 100%`, otherwise you're back to not having a height to trigger the scroll. — Jared Farrish, Mar 27 '13 at 01:31
Here is the [least changed version](http://jsbin.com/iqibew/12/edit), with just `top` and `margin` set. I see what you mean on the `html, body` bit not being needed...? EDIT: And [manually replicated](http://jsbin.com/iqibew/13/) (don't forget about `bottom: 0`). — Jared Farrish, Mar 27 '13 at 01:36
I'm having success with this approach. Why all the comments and no answer? — Jonathan Wood, Mar 27 '13 at 01:39
I just posted it. It seemed too simple, so I was waiting for some gotcha to appear. — Jared Farrish, Mar 27 '13 at 01:41
That's okay, you can tweak your answers. YOu can even delete them as others have done here. — Jonathan Wood, Mar 27 '13 at 01:45

score 8 · Accepted Answer · answered Mar 27 '13 at 01:40

8

I suppose I'll post this, since it seems to work:

div#header-div {
    height: 90px;
    background-color: lime;
    margin: 0;
}
div#fixed-div {
    position: fixed;
    left: 0;
    top: 0;            /* <<< No offset */
    bottom: 0;         /* <<< Pull to the bottom for height */
    margin: 120px 0 0; /* <<< Give it the 120px top */
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

http://jsbin.com/iqibew/13/

answered Mar 27 '13 at 01:40

Jared Farrish

48,585
17
95
104

On further testing, it appears I don't even need `margin: 120px 0 0;`. I think I can just set the top from JavaScript and the bottom to 0. Still testing. – Jonathan Wood Mar 27 '13 at 01:44
Right. You have a typo: `top 120px;`. Yep: http://jsbin.com/iqibew/17/ Fix the typo and add `bottom: 0`, you're good to go. – Jared Farrish Mar 27 '13 at 01:49
Please note that setting both `top` and `bottom` does not work as expected in older browsers: http://stackoverflow.com/a/5070238/1064286 – Piet van Dongen Mar 27 '13 at 16:57

score 1 · Answer 2 · answered Mar 27 '13 at 01:34

if you want your div to be sized as you like , i have an option for you

//Add this to <head> section , i thought you haven't one in the sample

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"  >
</script>

      <script type="text/javascript"  >
$(document).ready(function() {

function _resizeTDiv()
{
   var p = $("#header-div");
   var position = p.position();
   var realheight = p.position().top+p.height();
 $("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
 _resizeTDiv();

//Resize  our div on window resize?
$(window).resize(function() {
 _resizeTDiv();
});

});

</script>

How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?

2 Answers2