There are two divas in a column, the first diva has a dynamic height (that is, an unknown one) depending on the content. The second div should occupy the rest of the height minus the height of the first diva. Is it possible to implement this without javascript and without a table?

HTML

<div class="wrapper"> <div class="title">text text text text text text text text text text text text text text</div> <div class="body">text</div> </div>

CSS:

 .wrapper { height: 90%; width: 200px; background: red; padding: 0 5px; position: fixed; } .title { background: blue; } .body { background: yellow; height: 100%; }

Jsfiddle

https://jsfiddle.net/jetvsg8n/

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

You will be helped by flex with orientation on columns and proportions 0 and 1.

 .wrapper { height: 150px; width: 150px; background: red; padding: 0 5px; position: fixed; display: flex; flex-direction: column; } .title { background: blue; flex: 0; } .body { background: yellow; flex: 1; } 
 <div class="wrapper"> <div class="title">Lorem Ipsum Lorem Ipsum</div> <div class="body">text text text text text</div> </div>

  • Thanks for the answer, but the result is kind of weird. In your answer, the second (yellow block) occupied the whole height altogether, without subtracting the height of the first diva. - user2164613
  • @ user2164613 What does "all height" mean? Well, look, updated the answer, now the square wrapper, the proportions are clearly visible. If this is not the case, then I did not understand your question. - Athari
  • The body block occupied the entire height of the parent wrapper, and the title block (blue) is not visible at all in your example. I do not know how to explain the essence more clearly: The height of the body block should be 100% minus the height of the title block. - user2164613
  • one
    I (Version 47.0.2526.106 m (64-bit) you are using the newest version of Chrome.) On windows 10. And it looks like this for me: i.imgur.com/lZsuw7R.png - user2164613
  • one
    extra flex: 0; have class title. In general, it is better in this case to use not the flex alias, but specific properties: flex-grow, flex-shrink - Grundy

Is this result expected?

 html, body { height: 100vh; padding: 0; margin: 0; } .wrapper{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #68AAAB; height: 100%; max-width: 600px; margin: auto; padding: 10px; } .div--top { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #022827 } .div--bottom { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; background: #B5B74A } 
  <div class="wrapper"> <div class="div--top"></div> <div class="div--bottom"></div> </div>