Jessica Jessica - 3 months ago 8
CSS Question

Add element to bottom of page

I centered 2

divs
using
flex
, and I want to add a third
div
to the bottom of the page. Just like the image below

enter image description here

(I don't want the first 2
divs
to move up because the third
div
. I want the first 2
divs
to be centered based on its parent.)

I tried doing it, but the third
div
gets pushed off screen. And I can't make
#centerWrapper's height
less than
100%
, because then the 2
divs
won't be centered on the full page.

JSFiddle





*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body,
#parent {
width: 100%;
height: 100%;
}
#centerWrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#centerWrapper * {
width: 100px;
height: 100px;
}
#firstChild {
background-color: brown;
}
#secondChild {
background-color: lightblue;
}
#thirdChild {
background-color: greenyellow;
}

<div id="parent">
<div id="centerWrapper">
<div id="firstChild"></div>
<div id="secondChild"></div>
</div>
<div id="thirdChild"></div>
</div>




Pat Pat
Answer

Can you use position: absolute on thirdChild? Like this: https://jsfiddle.net/7qa7cd20/1/

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#parent {
    width: 100%;
    height: 100%;
    position: relative;
}

#centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#centerWrapper * {
    width: 100px;
    height: 100px;
}

#firstChild {
    background-color: brown;
}

#secondChild {
    background-color: lightblue;
}

#thirdChild {
    background-color: greenyellow;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
}
<div id="parent">
    <div id="centerWrapper">
        <div id="firstChild"></div>
        <div id="secondChild"></div>
    </div>
    <div id="thirdChild"></div>
</div>