如何使用CSS将div推到底？

Question

我的HTML定义如下：

<div id="container" className='row'>
    <div className='col-sm-9 col-md-6 col-lg-8'>
    </div>
    <div className='col-sm-3 col-md-6 col-lg-4'>
       <button id="bot" />
    </div>
</div>

因此，我希望将ID为bot（或其容器div）的按钮放置在相对于类为row的容器div的底部。

我试图这样做：

#container
{
   position: relative;
}

#bot
{
   position: absolute;
   bottom: 0;
}

但是，这会大大改变设计，因为它将bot推到其同级div的左侧和顶部。如您所见，我正在使用Bootstrap将其划分为网格。在我的情况下，如何使用CSS将此按钮推到底部？

Answer 1

在div上使用d-flex，在按钮上使用align-self-end

示例：https://jsfiddle.net/guiljs/rupoc45j/

 <div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
   <button id="bot" class=" align-self-end">
   Button at Bottom!
   </button>
</div>

如果您使用React，只需将class更改为className作为示例代码。

Answer 2

使用display：flex;您可以使第二列的内容与该列的末尾对齐。

.full-height {
  min-height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container py-3 full-height">
  <div class='row'>
    <div class='col-sm-9 col-md-6 col-lg-8'>
      This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This
      column has content. This column has content. This column has content.
    </div>
    <div class='col-sm-3 col-md-6 col-lg-4 d-flex flex-column justify-content-end'>
      <button>Button</button>
    </div>
  </div>
</div>

Answer 3

您正在寻找Bootstrap的align-items-end属性。这是一个可运行的示例：

#container {
  position: relative;
  height: 100px;
  width: 300px;
  background: gray;
}

#bot {
  background: black;
  width: 50px;
  height: 50px;
}

#first {
  height: 100%;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div id="container" class='row align-items-end'>
  <div id="first" class='col-sm-9 col-md-6 col-lg-8'>
  </div>
  <div class='col-sm-3 col-md-6 col-lg-4'>
    <button id="bot" />
  </div>
</div>

如果只想让一个项目与底部对齐，请参见Guilherme de Jesus Santos's answer，以获取使用align-self-end的示例。

Answer 4

尝试#bot的容器CSS

'{  高度：100％; }`