Add element to bottom of page

Question

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

(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>

Have you tried to add a width and height to your third child ? In your example, this element has no width, no height and no content so we can't see it. If you give it a width and height, we can see it but we have to scroll. — Sylvain B, Sep 01 '16 at 19:30
possible duplicate: http://stackoverflow.com/q/35246718/3597276 — Michael Benjamin, Sep 01 '16 at 19:43

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

UPDATE

To keep both blocks at such specified positions would not need the flexibility of flexbox. position might be a better solution. Add this ruleset to the #centerWrapper:

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

For #thirdChild, add these styles in order to keep it at the bottom of viewport.

  position: absolute;
  bottom: 0;

Make #parent a flex container of #centerWrapper and #thirdChild.

SNIPPET

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background: yellow;
  overflow-y: visible;
}
#centerWrapper {
  width: 100px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#centerWrapper * {
  min-width: 100px;
  min-height: 100px;
}
#firstChild {
  background-color: brown;
}
#secondChild {
  background-color: lightblue;
}
#thirdChild {
  min-width: 100px;
  min-height: 100px;
  background-color: greenyellow;
  position: absolute;
  bottom:0;
}

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

Thanks! The problem with this, is that the first two `divs` are pushed higher than it should be because of the third `div`. Meaning, if the third `div` wouldn't exist, the first 2 would be lower. I don't want it like that. I want the first two to be centered on the page, and the third one, on the bottom — Jessica, Sep 01 '16 at 19:41
Ok, I see, you probably don't need flexbox, `position` is a possibility or a combination of flexbox and `position` (more `position` than flexbox I suspect). Please review the update. — zer00ne, Sep 01 '16 at 20:02

score 0 · Accepted Answer · answered Sep 01 '16 at 19:30

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>

Why doesn't `margin:auto` horizontally center the third `div`? (Instead of `left: 50%; transform: translateX(-50%);`) — Jessica, Sep 01 '16 at 19:43

pol · Answer 3 · 2016-09-01T20:20:40.937

0

Your #thirdchild doesn't have any height or width. As to get it centered all you need to to do is add margin: auto;
I have also made the div 100x100 to make it visible.

https://jsfiddle.net/7qa7cd20/4/

*,
*: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: green;
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#parent {
    position: relative;
}

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

edited Sep 01 '16 at 20:20

answered Sep 01 '16 at 19:46

pol

2,641
10
16

Thanks! But I want the third `div` to be visible on the page. Just like the image shows – Jessica Sep 01 '16 at 19:47
For that you can just cut the height of the contentwrapper. Code updated. – pol Sep 01 '16 at 19:57
Thanks! The problem with this, is that the first two divs are pushed higher than it should be because of the third div. Meaning, if the third div wouldn't exist, the first 2 would be lower. I don't want it like that. I want the first two to be centered on the page, and the third one, on the bottom – Jessica Sep 01 '16 at 19:59
So you want the `thirdchild` div to act as a footer and not require scrolling to see it? For that you have to position it absolutely. Code updated. ------Just know that if the page is too small and the content needs more space, it will be partly hidden by the footer. – pol Sep 01 '16 at 20:23

Add element to bottom of page

JSFiddle

3 Answers3

UPDATE

SNIPPET