CODEWITHSUNDEEP
htmlcsspage-size
David Carek
David Carek

Reputation: 1113

Set a fixed HTML page height size

I want to set the size of a table so that I can use in line scrolling. So the table height needs to be the remaining height of the page but never get any larger. And I don't want a hard fix like pixel size. I want it to vary based on the window size. Anyone know the css for this?

Upvotes: 1

Views: 7396

Answers (2)

Alec Deitloff
Alec Deitloff

Reputation: 447

This could either be accomplished using Javascript, or you could try the following code:

.myTable {
    position:fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

You aren't able to use the height: 100%; directive, however. It doesn't work when trying to use it on a child nested in a <html> or <body> directly.

Edit: As far as I am aware, the height: 100% directive doesn't work on any element nested in an element without a fixed height. I mean, height: 100% will only work if its parent explicitly is told how tall to be (eg, height: 600px;).

Upvotes: 0

Paul Rowe
Paul Rowe

Reputation: 788

You can use the vh unit, but you will need to specify a height for the layout elements on your page if you want the table height to be the "remaining height of the page".

What is a vh? 1vh is 1% of the viewport height, the height inside the window when the page is loaded. 100vh is 100% of the viewport height. I don't believe the height is adjusted when the window is resized.

<style type="text/css">
div#header {
  height: 25vh;
  overflow: scroll;
}
div#table {
  height: 75vh;
  overflow: scroll;
}
</style>
<body>
  <div id="header">This text explains the contents of the table below.</div>
  <div id="table"><table>...</table></div>
</body>

Upvotes: 2

Related Questions