Good day! The parent unit .wrapper has a height of 100%. The height of the child block .info not defined, it can be different. Tell .wrp , please, how to stretch the child .wrp block for the rest of the height of the .wrapper block? Thank!

 body, html { height: 100%; margin: 0; padding: 0; } div { margin: 0; padding: 0; } .wrapper { display: block; overflow: hidden; height: 100%; width: 100%; background-color: silver; } .wrp { display: block; width: 100%; height: 100%; background-color: chocolate; } .info { display: block; width: 100%; background-color: blue; } 
 <div class="wrapper"> <div class="wrp"></div> <div class="info">Ты видел деву на скале<br />В одежде белой над волнами<br />Когда, бушуя в бурной мгле,<br />Играло море с берегами,<br />Когда луч молний озарял<br />Ее всечасно блеском алым<br />И ветер бился и летал<br />С ее летучим покрывалом?</div> </div>

    3 answers 3

    You can use jquery or js

      var height_wrapper = $('.wrapper').height(), height_info = $('.info').height(), height_wpr = height_wrapper-height_info; $('.wrp').css({'height': height_wpr});
    • Yes, only the last line, apparently, a typo. It works like this: $ ('. Wrp'). Css ({'height': height_wpr}); Thanks for the help! Good luck! - LADYX

    CSS solution with flexbox ( browser support )

     .wrapper { display: flex; flex-direction: column; } .wrp { flex: 1 1 auto; }
    • Sergey, I greet you! Yes, I know, really far with flex. This is a huge minus so far with regards to browser support for this property. There are no other options? I tried using display: table, fails. - LADYX
    • By caniuse.com, flexbox with prefixes works for 96.92% of users, so if you don’t need support for IE9 and below, feel free to use. - Sergey
    • I understand, thank you for the valuable information for me! Good luck! - LADYX

    Option with display: table

     *{ margin: 0; padding: 0; } body, html { height: 100%; } .wrapper { display: table; overflow: hidden; height: 100%; width: 100%; background-color: silver; } .wrapper__item{ display: table-row; vertical-align: top; height: 100%; background-color: chocolate; } .wrapper__item--info { background-color: blue; } 
     <div class="wrapper"> <div class="wrapper__item">text 1</div> <div class="wrapper__item wrapper__item--info"> Ты видел деву на скале </div> </div>