Question

I’m creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.

What I’m wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.

The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?

Answer 1

There’s no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won’t do it height-wise. This means that you can’t get something, like a content page or your buttons, to stretch out to fill rest of the empty space.

The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.

Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:

<form ...>
<table id="container">
  <tr><td id="top">Form elements go here</td></tr>
  <tr><td>Buttons go here</td></tr>
</table>
</form>

And the CSS:

#container {
  height: 100%;
  width: 100%;
}

#top {
  height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}

.buttons {
  height: 100%; /* Used to stretch the buttons to fill the element. */
}