Extending div height to bottom of page

[webasaur]

I have a sidebar that I’m trying to extend so that it reaches the very bottom of the page, which it does to a point. I have html and body set to a height of 100% as well as the containing parents, and the sidebar itself set as 100vh. This makes it work to a point, but on pages that are especially long it stops at a certain point. Does anyone know a potential solution to this problem?

[Paulie_D]

Set the sidebar to 100% height, if its parent is also 100% high (etc, etc) then that should do it.

Otherwise, a Codepen.io demo of the issue would be ideal so we can see the actual issue.

You might also use min-height:100% rather than just heighton the body.

[bearhead]

Here is a way you could do it with display:table
http://codepen.io/kvana/pen/LZWQMo

[webasaur]

I can’t really demo the code because it’s a corporate project, but the idea is simplistic enough:

http://codepen.io/anon/pen/Wxpzxd

I tried using min-height and that had no effect, but thank you.

[webasaur]

Bearhead thank you as well, but it didn’t have any effect.

[bearhead]

Not sure what you did, my method seems to work as expected:
https://codepen.io/kvana/pen/mEWxqW

[AsGYakimov]

What about using flexbox?

[webasaur]

Flex isn’t really an option as I suspect that most of the users won’t be using modern browsers. Thanks for the replies everyone, I’m guessing that the real problem lies somewhere else, I’ll just have to find it.

[Author]

Posts