页脚位置

时间:2016-10-21 08:13:51

标签: html css

我有一个页脚,我总是希望像这样在底部:

enter image description here

它必须始终处于最底层。我认为正确的方法是使用css:

#generated_footer_date {
color:#ffffff;
width:100%;
background-color:rgba(0, 0, 0, 0.6);
text-align:center;
padding-top:15px;
height:50px;
font-family: 'Raleway', sans-serif;
position:absolute;
right: 0;
bottom: 0;
left: 0;
margin-top:100px;
}

但现在当我点击生成时,它会在页面上显示数据,使页面更长,enter image description here

当我点击生成页面变得更长但页脚停留在自己的位置并且看起来像那样。我以为我可以用jquery来解决这个问题。如果我单击按钮我可以将页脚的位置从绝对更改为相对,然后它会工作,但我可以用css吗?

2 个答案:

答案 0 :(得分:3)

试试吧:

footer{
  position: fixed;
  bottom: 0
}

答案 1 :(得分:2)

尝试从position: absolute;更改为position: fixed;

#generated_footer_date {
    color:#ffffff;
    width:100%;
    background-color:rgba(0, 0, 0, 0.6);
    text-align:center;
    padding-top:15px;
    height:50px;
    font-family: 'Raleway', sans-serif;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top:100px;
}