Question

首先，我对CSS，Bootstrap和HTML相对较新。我想在屏幕底部放置一个响应元素。所以我有这个代码使它表现得相应：

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

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

Answer 1

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

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

Answer 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的特定于布局的规则将保持不变。

Answer 3

这是解决问题的简单方法。

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

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

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

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

您的页脚应具有以下CSS。

catMap = PetStore.groupAnimalsByOwner(cats); 
dogMap = PetStore.groupAnimalsByOwner(dogs);

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