Currently, I have a div with defined margins and within it, there are two other divs: one positioned on top and the other below. My goal is to make the lower div expand to fill the remaining space between the top div and the bottom margin of the main div.
Below is the current structure:
<div class="main">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS:
.main {
width: 90px;
height: 30vh;
min-height: 225px;
margin: 0;
margin-left: 5px;
margin-top: 25px;
margin-bottom: 25px;
}
The height of .main div adjusts according to the viewheight.
.top div contains a form with a height of 220px.
The goal is for the .bottom div to occupy the empty space between the .top div and the margin set at the bottom.
I've experimented with various methods but haven't found a solution that works perfectly. Using vh or % causes overflow when resizing the browser, while fixing it at the bottom results in overflowing the .top div. Since the .top div has transparent elements, hiding the .bottom div beneath it is not an option.
It seems like calculating the distance between the .top div and the bottom margin and setting it as the height for the .bottom div might be the key. However, despite searching for solutions extensively, I haven't found a suitable answer yet.
Just to clarify, this question is unique and not a duplicate of similar queries. Compatibility is also a priority, ruling out options like Flexbox and JavaScript.