How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?

javascript css html height

10,400

Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.

If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: http://jsfiddle.net/BnJxE/

JavaScript

var minHeight = 30; // Define a minimum height for the middle div

var resizeMiddle = function() {
    var h = $('body').height() - $('#header').height() - $('#footer').height();
    h = h > minHeight ? h : minHeight;
    $('#body').height(h);
}

$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height: 100%;
}

#header {
   background:#ff0;
   height: 100px;
}
#body {
   background: #aaa;
}
#footer {
   height: 60px;
   background:#6cf;
}

10,400

The Random Guy

Updated on July 04, 2022

Comments

The Random Guy almost 2 years
I have a div positioned at the top of the body and another div positioned at the bottom of the body

Now I want to place a div between those two divs and have its height take the max space available between those two divs.

The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.

More specifically :
```
<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px, width: 200px; background-color: green;"/>
    <div style="float: left; height: ???? ; width: 200px; background-color: red;"/> 
    <div style="float: left; height: 50px, width: 200px; background-color: blue;" />
  </div>
</body>
```
So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.

How can I achieve this?

Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.
The Random Guy almost 11 years

It's not working. Can you actually use position, bottom..etc. together with float ??
pb_ almost 11 years

infact in the last <div>, float: left; is not required.
The Random Guy almost 11 years

Setting the height of the middle div to 100% simply makes the height of the middle div equal to the height of the window. I need the height of the middle div to be equal to (the height of the window minus 100px) at all times. Can I do this using CSS? I don't think you can use position, bottom..etc. together with float by the way.
The Random Guy almost 11 years

This is the same as the solution I'm not looking for as I mentioned in my original post. This simply makes the middle div expand its height to the bottom of the window. I want the div to be placed between the two divs, not to overlap the bottom one.
The Random Guy almost 11 years

this is exactly the same as the you'd already posted, the middle div overlapping the bottom one
mn. almost 11 years

wrong link before, sorry. try this one. div is between top and bottom, and expands on window resize
The Random Guy almost 11 years

this is exactly the same as the you'd already posted, the middle div overlapping the bottom one
The Random Guy almost 11 years

there is no middle div in the above scenario, read my original post again it's rather straight forward
mn. almost 11 years

i would do darkmirage's solution, though for future reference, if your willing to have the top and bottom divs as a percentage height instead of a pixel(px) height, you can use this code
The Random Guy almost 11 years

creating a footer is very simple - just set the bottom of a div to zero and you have yourself a footer. I already came up with the js for doing what I'm looking for - all I need to do is set an interval and keep resetting the height of the middle div to (height of window - (height of top div + height of bottom div)).
The Random Guy almost 11 years

I just thought I could achieve the same thing using css given that there is a rather obvious need for such an effect. I basically have a list of indeterminate height. I want it to have a header and a footer and the middle part will be my list with a y-axis scrollbar so that header and footer remain static and I then use the scrollbar between the two to scroll up/down my list..
darkmirage almost 11 years

@TheRandomGuy You shouldn't reset the height at an interval. You should do it in an event handler for resizing the window so that it only runs when it is needed.