Guys, help with advice on vertskom.

There is such a structure

<div class="container"> <div class="top-box">шапка. 200px</div> <div class="content-box">контент. ОСТАВШИЕСЯ 100% (screen height - 200px)</div> </div>

It is necessary to somehow force the browser to calculate 100% of the height of the .content-box not from the window size, but from the remaining height inside the .container, but because .container stretched to the full height of the window - then the height of the .content-box should be calculated screen (height) minus .top-box (height).

Is there a trick to do this?

    2 answers 2

    The first thing that comes to mind is position: absolute . Styles for your example:

     .container { position: relative; height: 800px; /*Любая высота*/ } .top-box { position: absolute; top:0; height: 200px; width: 100%; background-color: blue; } .content-box { position: absolute; top:200px; bottom:0; width: 100%; background-color: red; }
    • I consider this answer as correct, because it does what I described in the question, but I forgot to point out that the content box and all parents must be relative before the body, since there is a bundle in the content-box: Isotope elements of the plug-in inside mCustomScrollBara, and if at least 1 genitive element is absolute - this business will not work) - Denis Masster

    Actually, I solved my problem with tables

     <div style="max-width: 100%;"> <table style="width: 100%; height: 100%; table-layout: fixed;"> <tr> <td> <div style="height: 200px;"> Я шапка, 200px </div> </td> </tr> <tr> <td style="height: 100%;"> <div style="height: 100%;"> Я контент, растянут на всю оставшуюся высоту экрана. </div> </td> </tr> </table> </div>