How to set a div to auto adjust it's height with available browser height

I have a div ( position :fixed ) with varying height depending on the content in it. To have an auto scroll for that i have added 开发者_StackOverflow中文版overflow-y:auto and assigned a fixed height.

Is there a way to auto set the height of the div so that when the browser space gets changed, the height of the div changes accordingly, and if there is not enough space the scroll bar appears and when there is enough available space the scroll bar disappears.

use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;

example HTML:

<div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

CSS:

#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

Working Example : Here

Use two DIVs, one nested inside of the other.

The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto

The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.

What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.

EDIT: Sample markup:

<div id="outer">
   <div class="inner">
      Content goes here.
   </div>
</div>

And the CSS:

#outer{
   position:fixed;
   max-height:100%;
   overflow-y:auto;
   bottom:0; /* sample value */
   left:0;   /* sample value */
}
#outer div.inner{
   /* Whatever style you want the positioned box
      to have. Border, padding, background, etc. */
}

You can listen to the resize event on the window and update the width accordingly.

$(window).resize(function() {

});

http://api.jquery.com/resize/

Alternatively, depending on the layout of your page, you might be able to just use height: 100% (or another % that works for you).