3 vertical div middle one takes space left by footer and header but middle div shows scrollbar when overflow

0
votes

I'm trying to solve a scrollbar problem.

I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header

This post helped me with this part: Middle div with 100% in CSS?

The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.

Now I have this: http://jsfiddle.net/rv4XS/31/

<body>
   <div id="wrap">
      <div id="container">
   <div id="header">header
   </div>
   <div id="content">data<br/>
      data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
   </div>
   </div>
   </div>
      <div id="footer">footer
   </div>
</body>​

Thanks for the help.

EDIT 1: Only firefox and chrome, No IE.

EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?

If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.

1
csshtmloverflow
This post stackoverflow.com/questions/1225261/… shows somebody with my exact problem ... the only diference is that mi footer is fixed to the bottom, and my header have to be fixed to the top – tony

1 Answers

0
votes

You can give #content as below :

Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.

Correct One

 #content {
    width:100%;
    height:100px;
    overflow: auto;
   }

I have updated JSFIDDLER