将页脚保持在页面底部

时间:2016-07-08 15:37:18

标签: javascript jquery html css django

我有以下内容:

Exception in thread "main" javax.mail.SendFailedException: Invalid Addresses;
nested exception is:
com.sun.mail.smtp.SMTPAddressFailedException: 504 5.5.2 <gtl@giedi-prime>: Sender address rejected: need fully-qualified address

at com.sun.mail.smtp.SMTPTransport.rcptTo(SMTPTransport.java:1862)
at com.sun.mail.smtp.SMTPTransport.sendMessage(SMTPTransport.java:1118)
at br.com.mentium.hrm.agent.utils.Emailer.generateAndSendEmail(Emailer.java:247)
at br.com.mentium.hrm.agent.utils.Emailer.main(Emailer.java:215)
Caused by: com.sun.mail.smtp.SMTPAddressFailedException: 504 5.5.2 <gtl@giedi-prime>: Sender address rejected: need fully-qualified address

at com.sun.mail.smtp.SMTPTransport.rcptTo(SMTPTransport.java:1762)
... 3 more

使用以下CSS:

<div class="wrapper">
    <div class="top">
    </div>

    <div class="left">
    </div>

    <div class="main">
    </div>

    <div class="footer">
    </div>
</div>

我希望将.top { position: absolute; left: 0; height: 80px; width: 100%; } .left { position: absolute; left: 0; top: 80px; bottom: 100px; width: 200px; margin-left: 5px; } .main { position: absolute; left: 200px; top: 80px; bottom: 100px; width: 84%; } .footer { position: fixed; bottom: 0; left: 0; } 保留在页面底部(footerleft之后,无论大小main是多少),但是当您滚动页面时,页脚会向上/向下滚动main。我试过了position: fixed并且没有将页脚一直推到底部。我已经尝试过这里找到的其他一些解决方案,但都没有。如何将页脚保留在页面底部(类似于本页底部的position: absolute)?

提前致谢!

4 个答案:

答案 0 :(得分:0)

试试这个:

.footer{
   position:absolute;
   bottom:0
}

位置绝对根据包含它的元素移动页脚。底部0将页脚保持在其父级的底部。

如果绝对定位元素的父元素具有relarive位置,则此方法有效。更具体地说,您的wrapper需要具有以下代码:

.wrapper{
   position: relative
}

答案 1 :(得分:0)

修复了您所描述的内容,使用视口锁定元素。绝对使一个元素忽略了页面其余部分的流程,所以如果你想让它在其他任何东西之下,你会遇到问题。给它一个镜头,它会把它放在你的所有内容之下。

footer{
  position: relative
  width: 100%
  float: left
}

如果你的内容很短,你需要它留在屏幕的最底部,你可以在所有内容周围添加一个包装元素并尝试这样的事情

.wrapper{
  display: block;
  min-height: 100vh;
  position: relative;
  padding-bottom: footer height (set this to how tall your footer is)
}
footer{
  position: absolute;
  bottom: 0;
}

答案 2 :(得分:0)

放手一搏:

                                                          
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
    .left {                                                                         
float:left;                                          
width: 200px;                                                               
margin-left: 5px;                                                           
}
#right {
   float:left;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

对于旧浏览器:

#container {
   height:100%;
}

答案 3 :(得分:0)

不要为每个<div>使用位置,只需要将位置添加到.footer

Here is a working example...