css Bootstrap ：使最后一行拉伸到剩余高度，并将文本粘贴到底部

v1l68za4 于 2023-11-19 发布在 Bootstrap

关注(0)|答案(3)|浏览(136)

我有一个像图片上的引导布局。它有几行包含列。绿色链接被放置在最后一行的列内。是否可以使链接始终粘在父容器的底部？它是相对定位的。选项是使用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/
x1c 0d1x的数据

css

来源：https://stackoverflow.com/questions/45029302/bootstrap-make-last-row-stretch-to-the-remaining-height-and-stick-text-to-butto

3条答案

按热度按时间

gab6jxml1#

为了在没有绝对定位的情况下工作，你需要给予它所有可用的高度（可能是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/

赞(0）回复(0）举报 2023-11-19

ukdjmx9f2#

我已经更新了你的代码，终于可以显示链接了。你需要定义主容器的最小高度和伸缩方向。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.lastRow {
   margin-top: auto;
}

个字符

赞(0）回复(0）举报 2023-11-19

q9rjltbz3#

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

型

赞(0）回复(0）举报 2023-11-19

我来回答

css Bootstrap ：使最后一行拉伸到剩余高度，并将文本粘贴到底部

3条答案

相关问题

热门标签

最新问答