将按钮放在 div 的底部答案

【问题标题】：Place button on bottom of a div将按钮放在 div 的底部
【发布时间】：2020-07-21 19:45:21
【问题描述】：

我使用的是 bootstrap 4.5，但这只是我想要的一个简单示例。

我有一张固定宽度和高度的卡片，我希望内容占据所有剩余空间，而按钮始终位于底部。我怎样才能做到这一点？

<html>
<body>

<div style="width:400px; height:704px; background-color:gray;">

<div class="container" style="width:100%; height:100%;">

    Some content
    <button>Some Button</button>
</div>


</div>

</body>
</html>

【问题讨论】：

stackoverflow.com/questions/2147303/… 是不是同样的问题？
您是在寻找要在引导程序中还是仅在 HTML 和 CSS 中的代码？
@MithunDas 我在下面的回答中引用了这篇文章

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

试试类似的，

position:absolute 将元素绝对定位在父 div 中。

.bttn {
        position: absolute;
        right:    50%;
        bottom:   0;
}

.cont {
        position: relative;
}

<html>
<body>

<div style="width:400px; height:154px; background-color:gray;">

    <div class="container cont" style="width:100%; height:100%;">
        Some content
        <button class="bttn">Some Button</button>
    </div>

</div>

</body>
</html>

【讨论】：

这是最容易实现的，因为只需要添加一些额外的属性。为按钮添加了一些边距，它很好地位于卡片底部的中心。
我会警告不要使用绝对位置的任何解决方案。绝对定位应作为最后的手段。特别是如果您没有直接访问代码的权限。您应该像 !important 类属性一样查看它。

【解决方案2】：

做这样的事情（引用帖子的正确答案）：

“但是因为内部 div 是绝对定位的，所以你总是需要担心外部 div 中的其他内容会与它重叠（并且你总是必须设置固定高度）。

如果可以的话，最好将内部 div 设置为外部 div 中的最后一个 DOM 对象，并将其设置为“clear: both”。”

   <div style="position: relative; 
                width: 200px; 
                height: 150px; 
                border: 1px solid black;">
    
        <div style="position: absolute; 
                    bottom: 0; 
                    width: 100%; 
                    height: 50px; 
                    border: 1px solid red;">
        </div>
    </div>

参考： How can I send an inner <div> to the bottom of its parent <div>?

对你来说可能是这样的：

<div class="container" style="width:100%; height:100%; position: relative;">

    Some content
    <div class="button" style="position: absolute; bottom: 0;"><button>Some Button</button></div>
</div>

【讨论】：

【解决方案3】：

CSS Flexbox 有一个快速且易于实现的解决方案。您可以做的是将父容器设置为显示：flex，将内容的方向更改为列（显示 flex 最初将 flex-direction 设置为行），然后将项目对齐到“space-between”，这意味着子元素将放置在容器的开始和结束处。这样，您的内容将始终位于开头，而您的按钮将位于底部。

<html>
<body>

<div style="width:400px; height:704px; background-color:gray;">

<div class="container" style="display: flex; flex-direction: column; justify-content: space-between; width:100%; height:100%;">

    Some content
    <button style="width: 100px">Some Button</button>
</div>


</div>

</body>
</html>

【讨论】：

【解决方案4】：

在 Bootstrap 中，你可以简单地使用 bootstrap 类来实现它，如下所示 -

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<body>
  <div class="card text-center" style="width:400px; height:704px; background-color:gray;">
    <div class="card-header">Header</div>
    <div class="card-body" style="width:100%; height:100%;">Content</div>
    <!-- The below button always stays at the bottom-->
    <div class="card-footer"><button class="btn btn-success">Some Button</button></div>
  </div>

</body>

这就是您可以使用 Bootstrap 类的方式。但是，如果您正在寻找一个简单的 HTML、CSS 的答案，这里有一个简单的方法 -

<div class="card" style="width:400px; height:704px; background-color:gray; text-align:center;">
  <div>Header</div>
  <!-- Here you need to leave some height for the button -->
  <div style="width:100%; height:90%;">Content</div>
  <div><button>Some Button</button></div>
</div>

【讨论】：

真的忘记了有页脚的引导卡。我会在检查其他选项后尝试这个，因为这个组件主要是纯 css，只有一些用于网格的引导类

【解决方案5】：

通常，即使浏览器窗口更大，您的网页也仅与其内容一样大。您可以覆盖它：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

但是，您希望一个元素占用“所有剩余空间”的部分很棘手。你有两个选择：表格布局或弹性布局。这是表格的布局方式：

body {
   display: table;
}
.container {
    display: table-row;
    height: 100%;
}

（我在这里只使用了原版 CSS，没有使用 Bootstrap。）

jsFiddle：https://jsfiddle.net/89rxtfuw/

【讨论】：

【解决方案6】：

您可以将内容放在另一个 div 中并使用 CSS flexbox 来执行此操作

HTML：

<div style="width:400px; height:704px; background-color:gray;">

<div class="container my-container" style="width:100%; height:100%;">
    <div class="content">Some content</div>
    <button>Some Button</button>
</div>

CSS：

.my-container {
  display: flex; /* add flex to container */
  flex-flow: column nowrap; /* set flex layout to be vertical */
}
.content {
  background: white; /* set white background on content div */
  flex-grow: 1; /* force content div to take over all the remaining space */
}

【讨论】：

【解决方案7】：

实现这一点的最简单方法是使用具有广泛跨浏览器支持的 Flexbox。 https://caniuse.com/#feat=flexbox.

更具体地说，我们将关注 flex-grow。 Flex-grow 将允许我们用完页面上组件之间的所有可用空间。

引导方式

（编辑：Abishek 使用上述引导卡的方式是专门为卡量身定制的最佳引导解决方案：https://stackoverflow.com/a/63022092/6871408）

您可以在此处了解有关 bootstrap 和 flex-grow 的更多信息。 https://getbootstrap.com/docs/4.1/utilities/flex/#grow-and-shrink

.container {
  background-color: #ccc;
}
.container button {
  background-color: #777;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex flex-column" style="width: 200px; height: 400px;">
  <div class="flex-grow-1">Hello World!</div>
  <button>Button</button>
</div>

简单的 Html/CSS 方式

.container {
  width: 200px;
  height: 400px;
  display: flex;
  flex-flow: column;
  background-color: #ccc;
}
.content {
  flex-grow: 1;
}
.container button {
  background-color: #777;
}

<div class="container">
  <div class="content">
    Hello World!
  </div>
  <button>Button</button>
</div>

【讨论】：