将页脚保持在页面底部

I've got the following:

我有以下内容:

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

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

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

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

With the following CSS:

使用以下CSS:

.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;
}

I'd like to keep the footer at the bottom of the page (after left and main, and regardless of how big/small main is), but with position: fixed the footer scrolls up/down as you scroll through the page. I've tried position: absolute and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the footer at the bottom of this page)?

我想将页脚保持在页面的底部(在左侧和主页之后,无论主要有多大/小),但是有位置:固定页脚在滚动页面时向上/向下滚动。我已经尝试过位置:绝对并且不会将页脚一直推到底部。我已经尝试了一些其他解决方案,但没有一个有效。如何将页脚保持在页面底部(类似于本页底部的页脚)?

Thanks in advance!

提前致谢!

4 个解决方案

#1

Try this:

.footer{
   position:absolute;
   bottom:0
}

Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.

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

This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:

如果绝对定位元素的父元素具有重新驱动位置,则这将起作用。更具体地说,您的包装器需要具有以下代码:

.wrapper{
   position: relative
}

#2

Fixed does what you're describing, locks elements with your viewport. Absolute makes an element ignore the flow of the rest of your page, so if you want to make it go beneath everything else you'll run into problems. Give this a shot, it'll put it underneath all your content.

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

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

If you need it to stay at the very bottom of the screen when you have very short content, you can add a wrapper element around everything and try something like this

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

.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;
}

#3

Give this a go:

放手一搏:

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;
}

And for older browsers:

对于旧版浏览器:

#container {
   height:100%;
}

#4

Don't use position for every <div> you only need to add position to .footer

不要为每个

使用位置,只需要将位置添加到.footer

Here is a working example...

这是一个工作的例子......

#1