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>

Answer 1

更新

要将两个块保持在这样的指定位置，就不需要flexbox的灵活性。 position可能是更好的解决方案。将此规则集添加到#centerWrapper：

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

对于#thirdChild，添加这些样式以使其保持在视口的底部。

  position: absolute;
  bottom: 0;

使#parent成为#centerWrapper和#thirdChild的灵活容器。

段

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以在thirdChild上使用position：absolute吗？像这样： https://jsfiddle.net/7qa7cd20/1/

＆＃13;

＆＃13;

*,
*: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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的#thirdchild没有任何高度或宽度。为了让它居中，您需要做的就是添加margin: auto;
我还将div 100x100设为可见。

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>