CODEWITHSUNDEEP
css
iliketolearn
iliketolearn

Reputation: 710

Make div stick to bottom of another div (not bottom of viewport)

How can I make a div stick to the bottom of the parent div, not necessarily the bottom of the viewport? I still want to place content below the parent div.

I'd like to do this with cross-browser compatibility and no JS if possible.

Upvotes: 9

Views: 33472

Answers (3)

dave.mcalpine
dave.mcalpine

Reputation: 407

position the footer(or div) absolute, with a fixed height. give the container padding equal to the height of the footer.

fiddle: http://jsfiddle.net/z47o6p3x/1/

html

<div class="container">
    <footer>bottom content</footer>
</div>
<p>additional content</p>

css

.container {
    height: 500px;
    border: 1px solid;
    position: relative;
    padding-bottom: 50px;
}
.container footer {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #eee;
}

Upvotes: 0

ngearing
ngearing

Reputation: 1365

Read up about css position: http://www.w3schools.com/css/css_positioning.asp

Basically you can position a div with absolute anywhere within a parent that has position relative.

.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 0;
}

Upvotes: 21

Underfrog
Underfrog

Reputation: 1317

Easy, use flexbox

Example here http://codepen.io/anon/pen/RWGvJR

You use

display: flex;

on the container. The you set the element you want to fill the space to

flex-grow: 1;

Hope that helps. No JS highly compatible (flexbox).

Upvotes: 4

Related Questions