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
Post a Comment