时间戳

首页 > 解决方案 > 将按钮放在 div 的底部

html - 将按钮放在 div 的底部

问题描述

我正在使用 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>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

尝试类似的东西，

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>

推荐阅读