-1

I got a div that has margins and inside it, I got 2 other divs: One on top and one below it. I want the div below the top div to fill the empty space to the margin of the main div.

Here's my 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;
}

.main div's height resizes by viewheight.
.top div is a form which has an height of 220px.
.bottom div should fill the empty space between the .top and margin-bottom.

I've tried everyhing I know. If I try vh or %, it overflows the margin-bottom once I resize the browser. If I fix it to the bottom, it overflows the .top div. Top div has transparent elements and I can't hide the .bottom div under the top div.

My guess is that somehow I need to get the distance from the .top div to the margin-bottom and set it as height for the .bottom div. But I've looked for solutions for over an hour and nothing.

And no. This question is not a duplicate of the ones under the title. I'm looking for compatibility too. Flexbox and Js is not good.

Sumutiu Marius
  • 421
  • 4
  • 18
  • If you really tried everything, perhaps you should post code of the efforts you made isntead of the barebones site layout – Samuel Hulla Jul 29 '18 at 11:04
  • @Rawrplus I already said what I tried. And I qote myself: "If I try vh or %, it overflows the margin-bottom once I resize the browser. If I fix it to the bottom, it overflows the .top div. Top div has transparent elements and I can't hide the .bottom div under the top div." In other words, I tried to set the height 5vh but it overflows the margin-bottom. If I do bottom: 0;, it overflows the top div. – Sumutiu Marius Jul 29 '18 at 11:11
  • Probably I should've said that I'm looking for compatibility too. I thought it was enough saying that I've looked over an hour for a solution. No. This question doesn't have an answer in the ones marked as duplicate. Old browsers do not support Flexbox and I don't want to use Js. I want pure CSS. – Sumutiu Marius Jul 29 '18 at 11:22
  • Of course, if you stick to only the accepted answer you want find what you need ... In the duplicate questions you have 35 answers and the one you accepted below is already there with more details so you need to read ALL the answers/comments/related links, etc etc – Temani Afif Jul 29 '18 at 12:00
  • here is 3 answers in the duplicate dealing with `calc` and doing the same as below : https://stackoverflow.com/a/23323175/8620333 | https://stackoverflow.com/a/37370197/8620333 | https://stackoverflow.com/a/32182925/8620333 – Temani Afif Jul 29 '18 at 12:02

1 Answers1

1

This might do what you want. It disregards the margin but I think that is not an issue for this.

.bottom { height: calc(100% - 220px); }

Ian Fleeton
  • 1,157
  • 8
  • 14