Bootstrap：将最后一行拉伸到剩余高度并将文本粘贴到buttom

Question

我有一个类似图片上的引导布局。它有几行包含列。绿色链接位于最后一行的列中。 是否可以使链接始终粘贴到父容器的底部？它相对定位。 选项是使用position：absolute，但我不能这样做，因为如果视口高度很小，它将与其他元素重叠。 有什么选择（使用@media条件除外）？ 这个元素的html代码是这样的：

<div class="bottom-link">
      <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                  <a class="big-link highlight-pink" href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> I wanna stick to bottom</a>
      </div>
  </div>

这里是JSFiddle https://jsfiddle.net/DTcHh/34705/

Answer 1

为了在没有绝对定位的情况下工作，你需要给它所有可用的高度（可能是calc或100％高度），然后使用flex：

.parent-of-a {
  /* height: ? You must give all available height here, just 100% won't work */
  display: flex;
  align-items: flex-end;
}

代码段确实会有所帮助。

<强>更新 我已按如下方式更新您的代码：

.container {
  height: 100vh;
}

.useful-row {
  height: 100%;
}

.col-lg-12.col-md-12.col-sm-12 {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

新小提琴：https://jsfiddle.net/ksiabani/wsvc4j31/

Answer 2

<div id="footer">
      <div class="container">
        <p class="footer-block">Footer</p>  
        </div>
    </div>


#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.footer-block { margin: 20px 0; }

#footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

使用css尝试上面的代码，或者您可以在粘性导航栏中使用以下bootstrap构建。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <!-- Your contents here-->
    </div>
</div>