How to Make a Div Occupy Remaining Vertical Space with CSS?

Filling the Remaining Vertical Space with CSS

The given HTML includes two divs (#first and #second) within a wrapper div (#wrapper). The goal is to occupy the remaining vertical space below #first using #second div solely with CSS.

To achieve this, modify the CSS code as follows:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

This revised code accomplishes the task by defining the following:

• Set the height of the HTML and body elements to 100% height to make the entire webpage fill the screen vertically.
• Change the #wrapper div's display property to "flex" and configure it as a vertical flex container.
• Assign a fixed height to #first div, ensuring it takes up 50 pixels vertically.
• Apply the flex-grow property to #second div with a value of 1. This allows #second to automatically fill the remaining vertical space within #wrapper.

The above is the detailed content of How to Make a Div Occupy Remaining Vertical Space with CSS?. For more information, please follow other related articles on the PHP Chinese website!