Friends, here is my example:

<div class="filterform> <div class="title"></div> <div class="content"></div> <div class="buttons"></div> </div>

Here is the CSS:

 .filterform{ width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); } .buttons{ height:60px; }

Height .title may vary.

I need to change the height of the .content class .content the following formula: The entire height of the form - the height .title - the height .buttons . During scrolling, the height of the form can vary, so js I would not want to use to set css. How can I solve this issue with pure css?

    1 answer 1

     html, body { height: 100%; padding: 0px; margin: 0px; } .filterform { display: flex; flex-direction: column; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); } .title { min-height: 60px; background: #000; } .content { flex: 1 0; padding: 20px; background: #f00; } .buttons { height: 60px; background: #000; } 
     <div class="filterform"> <div class="title"></div> <div class="content "></div> <div class="buttons "></div> </div>

    • Thank you very much! works! - WhoIsDT