div takes remaining height

Asked Apr 26 '16 at 19:27

Active Apr 26 '16 at 19:27

Viewed 64 times

I have the following divs

<div class="top">
   <div class="inner1"></div>
   <div class="inner2"></div>
   <div class="inner3"></div>
</div>

Here's the CSS:

.top { 
    height: 100vh;
}

.div1 {
    min-height: 215px;
    box-sizing: border-box;
    height: 30vh;
}

.div2 { 
    box-sizing: border-box;
    min-height: calc(100vh - 30vh - 265px);
    padding-top: 2.5em;
    margin-top: 0;
    display: table;
}

.div3 {
    min-height: 265px;
    box-sizing: border-box;
    background: white;
    display: table;
    width: 100%;
    font-weight: 700;
    padding-bottom: 42px;
}

I don't want to use calc(100vh - 30vh - 265px) to set the min-height of div 2. How can I have it so that it takes the remaining height (meaning div2 height = 100vh - div1 height - div2 height.

I'm guessing flex could be useful here, but I'm not quite sure how to use it. Any help would be greatly appreciated.

Thanks?

asked Apr 26 '16 at 19:27

J K

4,883
6
15
24

Flex and uikit are both cool tools that can help with something like this. I use uikit all the time (getuikit.com). Their docs and examples are helpful. – LuvnJesus Apr 26 '16 at 19:34
1

Found this .. shows how to use Flexbox: http://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css – LuvnJesus Apr 26 '16 at 19:36
I tried flexbox but it doesn – J K Apr 26 '16 at 20:10
I tried flexbox but it doesn't work in IE – J K Apr 26 '16 at 20:10

div takes remaining height

0 Answers0

Linked