css - 无法将页脚设置为底部

Question

我有这个代码:

<div id="login-frame" class="frame-container">
<h2>Dash</h2>
<p>Wellcome</p>
 <hr>
<div class="alert hidden"></div>
<div class="frame-content">

<div class="row">
  <div id="appuntamenti_futuri" class="command-buttons tile col-xs-6 btn">
  <b class="title">Appuntamenti futuri</b>
  </div>
  <div id="storico_appuntamenti" class="command-buttons tile col-xs-6 btn">
   <b class="title">Storico</b>
  </div>
</div>

<div class="row">
  <div id="prenotazioni" class="command-buttons tile col-xs-12 btn">
  <b class="title">Prenota</b>
  </div>
</div>

<div class="row">
  <div id="card" class="command-buttons tile col-xs-6 btn">
  <b class="title">Card</b>
  </div>
  <div id="prepagate" class="command-buttons tile col-xs-6 btn">
    <b class="title">Abbonamento prepagate</b>
  </div>
</div>

<div id="frame-footer">
  <span style="color: #FFFFFF">Developed by</span>
  <a href="#" target="_blank">
                Someone
  </a> 
 <span id="select-language" class="label label-warning">
                    Language
 </span>
 </div>

</div>

这是一个jsfiddle

你怎么能看到页脚不在底部但后面有一个空行，我设置了正文的背景来向你展示问题。我做错了什么？

Answer 1

要将任何页脚元素设置到底部，您需要使用 position: absolute 或 position: fixed。请阅读这篇文章 about Position in CSS 以获得完整的引用。

在您想要的页脚元素的父元素上使用 position: relative 将确保您的页脚元素(现在具有 position: absolute)是相对于其父元素的。紧接着，在页脚元素上使用 bottom: 0 会将其直接推到屏幕底部。从那里开始，您可以将其宽度设置为 width: 100%，这将创建页脚的绝对基本布局。

最后不言而喻，确保您的 html 和 body 元素覆盖整个屏幕，以便您的页脚真正位于屏幕底部。我在这里写了一个非常简单的例子(某种模板):

html, body {
    width: 100%;
    height: 100%;
}

.my-page-wrapper {
    position: relative;
}

.my-bottom-footer {
    position: absolute;
    bottom: 0;
}

总而言之，将上述注释应用于您的代码会产生以下 JSFiddle .

如果您有任何问题，请告诉我。

编辑

根据我上面的 JSFiddle 和下面的评论，我们得出结论，所有需要的只是让页脚元素直接位于 login-frame 元素下方，为此我删除了 position : absolute 和 bottom: 0。问题的相关部分，即页脚元素中的 border-top 属性，是必须从代码中删除的所有部分。这可以在更新的 JSFiddle 中看到.