Question

Background

I have the following html code:

<div id="parent">
    <div id="child">
        I'm the child!
    </div>
</div>

I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.

This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).

Question

What’s the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I’m wrong, but this doesn’t appear to be a problem with horizontal padding/borders)

My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?

Thanks!

(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)

Answer 1

If you get rid of those display: inline;s it will work like a charm.