使用 CSS、HTML 和 Bootstrap 将位置响应元素放置到屏幕底部

Posted 2023-03-06

【中文标题】使用 CSS、HTML 和 Bootstrap 将位置响应元素放置到屏幕底部

【英文标题】：Position-responsive element to the bottom of the screen using CSS, HTML, and Bootstrap

【发布时间】：2015-12-18 11:31:14

【问题描述】：

首先，我对 CSS、Bootstrap 和 html 比较陌生。我想在屏幕底部放置一个响应元素。 所以我有这段代码，使它的行为响应：

<div class="col-sm-12">
    test
</div>

但是如何让它粘在页面底部呢？我已经尝试过具有绝对位置的 ID/Class 选择器。它将元素移动到底部，但不再响应。

【问题讨论】：

你到底在说什么元素？它像页脚吗？

HTML/CSS positioning "float: bottom"的可能重复

...您希望它如何响应？

Twitter Bootstrap 3 Sticky Footer的可能重复

【参考方案1】：

<div id="my-element" class="col-sm-12">
    test
</div>

#my-element 
    position: fixed;
    bottom: 0;

【讨论】：

谢谢！完美地为我工作^^

【参考方案2】：

一种解决方案可能是将所需元素包装在另一个 div 中，然后定位包装元素以将其固定到屏幕底部。您的标记可能如下所示：

<div class="fixed-container">
    <div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->

你的样式可能看起来像：

.fixed-container 
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

这会将.fixed-container 元素附加到视口的左下方，并将宽度设置为视口的100%。应用于.col-sm-12 的特定于布局的规则将保持不变。

【参考方案3】：

这里有一个简单的解决方案。

确保您的元素位于包装 div 中。由于您使用的是 Bootstrap，请使用：

<div class="container-fluid">

在此容器内放置您的元素/部分，包括您的页脚：

<footer class="col-md-12">

您的页脚应具有以下 CSS。

footer 
       position: absolute;
       bottom: 0;
       height: 100px /* Height of your footer */
       width: 100%;
   

这是一个小提琴。您可以看到页脚位于具有黑色边框的容器底部。

http://jsfiddle.net/gward90/ehf2wm83/