将 div 对齐到容器的底部答案

【问题标题】：Align div to the bottom of a container将 div 对齐到容器的底部
【发布时间】：2020-06-05 22:29:38
【问题描述】：

我正在使用 skeleton CSS，我试图让 div 位于页面底部。我试过在容器内使用position: absolute; bottom: 0; 有一个相对位置，但div 只是与页面的右侧对齐。

.page {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content: center;
  min-height: 100vh;
}

#home {
  background: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

<div class="page" id="home">
  <div class="container" style="text-align: center;">
    <div class="row">
      I am a title in the middle of the page.
    </div>
    <div class="row" style="">
      I want to be at the bottom of the page.
      <br>
      <a href="#">Click here!</a>
    </div>
  </div>
</div>

请问可以吗？

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

从 CONTAINER 父元素中取出底部文本元素并将其作为 PAGE 元素的子元素，然后 position:absolute 将起作用：

https://jsfiddle.net/akLr6zb0/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

<div class="page" id="home">
  <div class="container" style="text-align: center;">
    <div class="row">
      I am a title in the middle of the page.
    </div>
  </div>
  <div class="bottom" style="">
    I want to be at the bottom of the page.
    <br>
    <a href="#">Click here!</a>
  </div>  
</div>

.page {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content: center;
  min-height: 100vh;
  position: relative;
}

#home {
  background: red;
}

.bottom {
  bottom: 0;
  display: block;
  position: absolute;
}

【讨论】：

就这么简单！尴尬 :-/ 谢谢你的帮助

【解决方案2】：

position: absolute; bottom: 0;是对的，但你还需要确保直接父.container是页面的高度，然后以display: flex居中：

.page {
  min-height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#home {
  background: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

<div class="page" id="home">
  <div class="container" style="text-align: center;">
    <div class="row">
      I am a title in the middle of the page.
    </div>
    <div class="row" style="position: absolute; bottom: 0;">
      I want to be at the bottom of the page.
      <br>
      <a href="#">Click here!</a>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

我不确定这是否是您想要的，但我通过将容器显示为 flex 来实现。

.page {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;  
  justify-content: center;
  min-height: 100vh;
}

#home {
  background: red;
}

.container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">

<div class="page" id="home">
  <div class="container">
    <div class="row">
      I am a title in the middle of the page.
    </div>
    <div class="row bottom" style="">
      I want to be at the bottom of the page.
      <br>
      <a href="#">Click here!</a>
    </div>
  </div>
</div>

【讨论】：