内容短于页面大小时出现粘滞页脚

-2

我有一个可正常运行的页脚，但是当页面内容的大小比页面大小短时，页脚会呈现在内容不在底部的内容之下页面，这里是图像：内容短于页面大小时出现粘滞页脚

enter image description here

这里是我的代码（jsbin段）：

.footer { 
 
     position: absolute; 
 
     width: 100%; 
 
     margin-bottom: 0; 
 
     background-color: #2D2D2D; 
 
     height: 100px; 
 
     text-align: center; 
 
     color: white; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    
 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 
    <meta name="viewport" content="width=device-width" /> 
 

 

 
    </head> 
 
    <body ng-app="AngularJSApp"> 
 
    <div class="contentBody"> 
 
      
 
     
 
     <div id="contenido"> 
 
      @RenderBody() 
 
     </div> 
 

 
    </div> 
 

 

 
    <div class="footer"> 
 
     
 
     <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a></p> 
 
    </div> 
 

 
</body> 
 
</html>

我能做些什么来解决这个问题，并始终将页脚保留在页面的底部？

来源

2015-04-20 Diego Unanue

'的位置是：固定;底部：0' –

@gp。你怎么知道什么时候修复而不是？我相信他不希望整个时间都固定页脚。 – evolutionxbox

它会更好，如果你可以提供我们你的代码在jsFiddle .. –

您可以使用此粘页脚：

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
.contentBody { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -100px 
 
} 
 
.contentBody:after { 
 
    content: ""; 
 
    display: block 
 
} 
 
.footer, 
 
.contentBody:after { 
 
    height: 100px 
 
} 
 
.footer { 
 
    width: 100%; 
 
    background-color: #2D2D2D; 
 
    text-align: center; 
 
    color: white 
 
}

<body ng-app="AngularJSApp"> 
 
    <div class="contentBody"> 
 
    <div id="contenido"> 
 
     @RenderBody() 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a> 
 
    </p> 
 
    </div> 
 
</body>

来源

2015-04-20 15:30:58 dippas

添加到您的CSS

html, body { 
    min-height: 100%; 
}

和.footer变化

margin-bottom: 0;

到

bottom: 0;

来源

2015-04-20 15:32:28 AnnieMac

可以使用

html,body { 
    position:absolute; 
    bottom: 0px; 
}

来源

2015-04-21 08:04:03

内容短于页面大小时出现粘滞页脚

回答

相关问题