In the following frame:

<div id="menu"></div> <table style="height:100%;> <!-- content --> </table> <div id="prompt"></div>

It is necessary to make the menu and prompt have a fixed height and are located relative to the table above and below, respectively. A table occupied the height of the remaining space. In this case, the height is equal to the height of the parent unit.

How to determine the height of the remaining place?
So far, as an option, made in the table padding'i top and bottom, and the corresponding negative margin'y. It looks like a crutch, but can there be other ways?

    2 answers 2

    It can be done without negative margins , if it is possible to add a position other than static to the parent container. Then for #menu and #prompt we add postion: absolute , and for the table we add padding 'and the required height.

    Example http://codepen.io/anon/pen/xbNWMO

    But the better option is to make #menu and #prompt part of the table, for example: http://codepen.io/anon/pen/WbBJNm . There will be no dependence on the height of the content #menu and #prompt, plus another vertical positioning.

    A better variant than the previous one is to rewrite to a block layout ( display: table \ table-row \ table-cell ) or flex.

    • I considered the variant with their inclusion in the table, but then they directly depend on the number of columns that were not defined, then it would only be necessary to combine the cells, but this is unnecessary - Ni55aN
    • one
      If the content is not known in advance, it would be better to make an option with the display: table - codepen.io/anon/pen/zxQjpw . Now #menu and #prompt can be of any height, you can add vertical positioning, and there is also no dependence on the content. - Evgeniy Belyatinskih

    for html, body set height:100%; and then your height:100%;