0

I created a page that has three tables. The second table is inside a div with overflow: auto.

My problem is precisely in this table. I need the entire page has never more than 100% in height.
- The first table should always be visible at the top of the page;
- The third table should always be visible at the bottom of the page;
- The second table should have their height varied according to the space remaining to complete 100% of the browser.

Does anyone know how to solve my dilemma?

Here is a demonstration of the code: http://jsbin.com/omeRUtIr/7/edit?html,css,output

Júlio Pradera
  • 466
  • 2
  • 9
  • 25

1 Answers1

1

You need to do something like that:

#header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 50px;
}

#content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  overflow: auto;
  width: 100%;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50px;
}

You can see the result here: http://jsbin.com/omeRUtIr/13/edit

You can also use percentage (instead of fixed height) if you want each table to have one third of the height for example. You will get something like this: http://jsbin.com/omeRUtIr/15/edit.

j3r6me
  • 798
  • 1
  • 5
  • 21
  • You set a height to the header and footer. I don't have the height of both. =/ – Júlio Pradera Feb 10 '14 at 20:56
  • If you want to have fixed top and a fixed bottom, you also want to have a fixed height and make it not to big. Otherwise it will fill to much of the screen and leave no place for the content. An other solution is to use percentage if you want each table to have one third of the height (I will update my response with this option). – j3r6me Feb 11 '14 at 08:46
  • Thanks for the help but set a value for the height of the first and the third div is not a solution in this case. I'm working with a code that will be inherited. If one day someone change this screen, who get the job ends up with more work than necessary. – Júlio Pradera Feb 11 '14 at 11:49