There is such a markup:

* { margin: 0; padding: 0; font-family: Tahoma; } html, body, .wrapper { height: 100%; } .wrapper { position: relative; width: 960px; margin: 0 auto 0 auto; } header { width: 100%; height: 45px; text-align: center; background: yellow; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 207px; background: green; } .centered-middle { width: 100%; height: 100%; } .wrap-border-center { width: 100%; height: 200px; } .center { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 280px); padding-bottom: 230px; background: red; } 
 <div class="wrapper"> <header> <h1>Заголовок</h1> </header> <div class="center"> <table class="centered-middle"> <tr valign="middle"> <td> <div class="wrap-border-center"> </div> </td> </tr> </table> </div> <div class="footer"> </div> </div>

When I slowly narrow the browser window, the distance of the red block between the footer and the cap decreases. Then the red block rests against the cap (yellow block), the footer (green block) begins to adjust the top of the red until it closes it completely. The red block only at the end begins to close the yellow block.

It is necessary for me that when the browser window is narrowed down, the red would start to close the yellow block even before it closes the green. That is, so that with a very narrow browser window, a red block and green are displayed on the screen, since yellow will be closed red.

    1 answer 1

    Use media queries. For example, if the height is less than 500px, close the top element:

     @media (max-height: 500px) { .center {  height: calc(100% - 230px); } }
    • I knew that I needed to set a condition, but I did not know how to implement it on CSS. Thank you very much. - Vitali Fesyura