Home > Web Front-end > CSS Tutorial > How to Fill Remaining Vertical Space with a Div using Only CSS?

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

DDD
Release: 2024-10-31 03:11:02
Original
932 people have browsed it

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template