html - How to spread a div to cover available space in a parent container? -


let's have div container , container dynamically resized third-party javascript code.

<div class="container">     <div class="header">         ...some content...     </div>      <div class="body">         ...body content...     </div> </div> 

is there css way how let body div spread available horizontal , vertical space of parent container?

note can't set fixed height on header div because content generated on fly , it's not same height.

css flexbox can if height of container isn't known/set explicitly:

.container {      width: 348px; /* random value simulate being set javascript */      border: 1px solid black; /* here demonstration purposes */      display: flex;      flex-direction: column;      -webkit-flex-direction: column;  }    .body {      background: tomato;      height: 100%;  }
<div class="container">      <div class="header">          ...some content...      </div>        <div class="body">          ...body content...          <br/>          more.          <p>asdf yeah paragraph</p>      </div>  </div>


Comments

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -