How to Fill Remaining Vertical Space with a Div using Only CSS?

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:

1. Set height to 100% for html and body to occupy the full height of the viewport.
2. Create a parent container .wrapper with display: flex.
3. Set flex-direction: column to arrange child elements vertically.
4. Assign a fixed height to .first to determine its size.
5. Use flex-grow: 1 on .second to enable it to expand and fill the remaining vertical space.

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!