CODEWITHSUNDEEP
css
FooMon
FooMon

Reputation: 1

How to set div height depending on screen height minus the height of an absolutely positioned element?

I have a panel with a height of 100vh, so 100% of the screen (but height: 100% doesn't work, for some reason).

This panel must show a div with its own contents and the footer.

The footer is normally displayed under that panel, but in the front page it must be inside it, so I have to disable the normal one and call it inside the panel. Thus, it must have position: absolute and bottom: 0.

Now the problem is that the footer takes its own height (which changes a bit when resizing the window's width), and the other div in the panel must take all the remaining height.

So, is there a way to set that div's height dynamically, rather than filling the CSS with media queries for each window width where the footer's height changes, setting it as height: calc(100vh - [footer height])?

Upvotes: 0

Views: 2452

Answers (2)

Minxtrosity
Minxtrosity

Reputation: 21

Firstly, if you don't set height for parent elements, setting height in percentages on the child won't work. Your parent elements should have their height set to 100% (including html and body elements).

Secondly, if your browser support is IE10+, I recommend using flexboxes. Here's how you do it (without browser prefixes):

.parent-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

This will set the parent container as flexbox and change its direction to "column" (so its children stack one under the other).

.expanding-child {
    height: 100%;
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
}

This is the wrapper for your content. It will expand as much as it can, keeping in mind your footer's height.

.sticky-child {
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

This is your footer that will now always be at the bottom, pinned, without overlapping the scrollable content.

Here is what your HTML would look like:

<div class="parent-container">
    <div class="expanding-child">
    </div>

    <div class="sticky-child">
    </div>
</div>

And I made a quick fiddle to demonstrate it here

This will work as intended only if you set height to 100% on all parent elements.

Edit: here is a good source to learn more about flexbox, I recommend looking into it. And here is one I used when I first started using flexbox.

Upvotes: 2

bala.tamizh
bala.tamizh

Reputation: 818

I think you are asking about sticky footer. I hope it will helps you. Always footer fixed at bottom using FlexBox Fiddle

Upvotes: -1

Related Questions