內容短於頁面大小時出現粘滯頁腳

-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

內容短於頁面大小時出現粘滯頁腳

回答

相關問題