0

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.

Community
  • 1
  • 1
tony
  • 84
  • 10
  • This post http://stackoverflow.com/questions/1225261/css-100-height-content-area-with-variable-height-header 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 Nov 29 '12 at 22:39

1 Answers1

0

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

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • Thanks. But I need to have the content div fill all the space left. The thing is that the scrollbar only appears when the div is being overflown and not before. – tony Nov 27 '12 at 15:10
  • Sorry, but I still cant see the content div taking all the space left by the footer and header ... One thing to notice is that if I resize my window to a smaller size, there will be a point where the content div will not be visible. – tony Nov 27 '12 at 15:55
  • Do you having live url which I can see actual scenario on browser rather than jsFiddler. – Sampath Nov 27 '12 at 16:04