Responsively Filling Vertical Space with #second Using Only CSS
Question:
How can we fill the remaining vertical space under #first within #wrapper using only CSS?
Solution:
To achieve this, we can utilize the flexbox properties in CSS:
<code class="css">html, body { height: 100%; margin: 0; } .wrapper { display: flex; flex-direction: column; width: 300px; height: 100%; } .first { height: 50px; } .second { flex-grow: 1; }</code>
HTML:
<code class="html"><div class="wrapper"> <div class="first" style="background:#b2efd8">First</div> <div class="second" style="background:#80c7cd">Second</div> </div></code>
Explanation:
The above is the detailed content of How to Fill Remaining Vertical Space with a Div using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!