Search code examples
cssheightdivider

CSS Height Issue With Floating Bar 100%

So, quickly typing this, so sorry if it's kinda vague/confusing.

So, I have a bar I am using css on the bottom of the screen, and I have a divider above it. I try to use height 100% on the divider to get the height to go all the way to the bottom, but it goes under the bar, and I want it not under the bar. How would you guys suggest I do this? I would prefer a css method, but javascript would be fine too.

Solution

  • If you have any padding on that divide, it will be added to the 100%. Thats probably your question. Something like this maybe:

    <style>
    .one {
        height:100%;
        display:block;
    }

    .two {
        padding: 20px;
    }
</style>

<div class="one">
    <div class="two">

    </div>
</div>