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

我想在很久以前做类似的事情。尝试将此作为div上的css类

bottom:36px;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
    (document.documentElement.clientHeight-this.offsetHeight)));
height:30px;
width:500px;
margin-left:205px;
background:#efefef;
color:#000000;
overflow:auto;

Answer 2

要将任何页脚元素设置到底部，您需要使用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和{{1 }}。问题的相关部分（即页脚元素中的bottom: 0属性）必须从代码中删除。这可以在更新的 JSFiddle 。
中看到

Answer 3

不确定我是否正确理解你，但这应该是你想要的：

#frame-footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

无法将页脚设置为底部

3 个答案: