You can use the "flex" and "flex-grow" classes to make a div occupy the remaining height of its parent div.
Here's an example:
<div class="h-screen flex flex-col">
<div class="bg-blue-500 h-20">Header</div>
<div class="bg-red-500 flex-grow">Content</div>
<div class="bg-green-500 h-20">Footer</div>
</div>
In this example, the parent div has a height of the screen size (h-screen class) and uses the flex layout (flex and flex-col classes). The three child divs have different colors to show their position.
The second child div (with the red background) uses the "flex-grow" class, which makes it occupy the remaining space in the parent div. The other two child divs have fixed heights, but the second child div grows or shrinks to fill the remaining space.
You can adjust the heights of the child divs as needed to get the desired layout.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-07-01 11:00:00 +0000
Seen: 10 times
Last updated: Jun 24 '22
What is the method for adjusting the size of a Div to fit its content?
In CSS, what is the method to wrap the content of a div when a paragraph spans across two lines?
How does adding a double border impact the size of the div?
How can the div of a WooCommerce product page be hidden if the product is available in stock?
How can I prevent the reset of the hide/show div on page refresh?
What is the method to center a div vertically?
How can React components be hidden or shown without causing re-renders?
What is the process for arranging several divs in a row using inline-block?