如果內容非常少，如何將頁腳始終粘貼到頁面底部？

即使當我重新調整頁面大小時，頁腳仍應保留在底部。在我的情況下，當我重新調整頁面的高度時，頁腳與內容重疊。如果內容非常少，如何將頁腳始終粘貼到頁面底部？

.body{ 
 
    \t background: #00b7ea; /* Old browsers */ 
 
    \t font-family:Arial, Helvetica, sans-serif; 
 
    \t font-size:85%; 
 
      height: 100%; 
 
    } 
 

 
    .container{ 
 
    min-height:100%; 
 
    position: relative; 
 
    } 
 
    .formContainer{ 
 
    \t width:30%; 
 
     height: 100px; 
 
    \t background-color:#fff; 
 
    \t margin:auto; 
 
      padding-top: 0; 
 
    \t border-radius:5px; 
 
    \t box-shadow:5px 5px 55px #9999; 
 
    \t padding-bottom:60px; 
 
    } 
 
    .footer{ 
 
     position:absolute; 
 
    \t width:100%; 
 
     bottom:0; 
 
    \t height:60px; 
 
    \t background-color:#333; 
 
    }

<body class="body"> 
 
     \t <header class="header"> 
 
    \t </header> 
 
     \t <div class="container"> 
 
        <div class="formContainer"> 
 
        </div> 
 
    \t \t <footer class="footer"> 
 
    \t \t </footer> 
 
     </div> 
 
    </body>

來源

2013-07-23 Shouvik Bhuiyan

[將頁腳正確粘貼到頁面底部]可能的副本（http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly） –

用於此http ：//ryanfait.com/sticky-footer/ –

你應該移到頁腳標記出來的div

<header class="header"> 
    </header> 
    <div class="container"> 
       <div class="formContainer"> 
       </div>   
    </div> 
    <footer class="footer"> 
    </footer>

DEMO

添加height:100%到HTML和正文，那麼只有你的容器需要100％的高度，並保持你的HTML代碼原樣。

html, body{ 
    height:100% 
}

DEMO 2

PS - 我想在你的CSS .body是錯誤的，它應該是唯一body

來源

2013-07-23 06:19:25 Sowmya

問題是當我重新調整頁面的高度並使窗口變小時，頁腳與頁面的其他內容重疊。我希望它始終處於最底層。它不應該拿出頁面。當我重新調整大小時。 –

@ShouvikBhuiyan檢查更新的答案 – Sowmya

你需要的是粘頁腳，有兩種方法來實現它。

http://css-tricks.com/snippets/css/sticky-footer/（使用CSS）
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/（使用jQuery）

來源

2013-07-23 06:22:01

試試這個

http://jsfiddle.net/WPYCJ/

.footer{ 
    position:fixed; 
    width:100%; 
    bottom:0; 
    height:60px; 
    background-color:#333; 
}

來源

2013-07-23 06:23:36 falguni

試試這個。由於

CSS

.body{ 
    background: #00b7ea; /* Old browsers */ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:85%; 
     height: 100%; 
} 

.container{ 
height:90%; 
background-color:#fff; 
} 
.formContainer{ 
    width:100%; 
    height: 100px; 
     margin:auto; 
     padding-top: 0; 
    border-radius:5px; 
    box-shadow:5px 5px 55px #9999; 
    padding-bottom:60px; 
} 
.footer{ 
    width:100%; 
    bottom:0; 
    height:5%; 
    background-color:#333; 
}

HTML

<body class="body"> 
    <header class="header"> 
    </header> 
    <div class="container"> 
       <div class="formContainer"> 
       </div> 
      </div> 
<footer class="footer">test 
     </footer> 

</body>

來源

2013-07-23 06:29:30 nvn

我有同樣的問題，我用這個代碼：

<script> 
    var top = $(document).height() - $("footer.main-footer").height() ; 
    $("footer.main-footer").css('top' , top); 
</script>

變化。主要英尺到您的頁腳的類。

來源

2015-01-13 19:06:29

如果內容非常少，如何將頁腳始終粘貼到頁面底部？

回答

相關問題