如果內容很少，如何將頁腳始終放在頁面底部？

Question

即使我重新調整頁面大小，頁腳也應保留在底部。 就我而言，當我調整頁面高度的大小時，頁腳與內容重疊。

  .body{ background: #00b7ea; /* Old browsers */ font-family:Arial, Helvetica, sans-serif; font-size:85%; height: 100%; } .container{ min-height:100%; position: relative; } .formContainer{ width:30%; height: 100px; background-color:#fff; margin:auto; padding-top: 0; border-radius:5px; box-shadow:5px 5px 55px #9999; padding-bottom:60px; } .footer{ position:absolute; width:100%; bottom:0; height:60px; background-color:#333; }

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

Answer 1

您應該將頁腳標記移出div

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

DEMO

將height:100%添加到html和body，然后只有您的容器將高度設為100％並保留html代碼。

html, body{
    height:100%
}

演示2

PS-我認為CSS中的.body是錯誤的，應該只是body

Answer 2

您需要的是粘性頁腳，有兩種方法可以實現它。

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

Answer 3

嘗試這個

http://jsfiddle.net/WPYCJ/

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

Answer 4

嘗試這個。 謝謝

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>

Answer 5

我遇到了同樣的問題，我使用了以下代碼：

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

將.main-footer更改為您的頁腳類。

如果內容很少，如何將頁腳始終放在頁面底部？

問題描述

5 個解決方案

解決方案1
1 2013-07-23 06:19:25

解決方案2
0 2013-07-23 06:22:01

解決方案3
0 2013-07-23 06:23:36

解決方案4
0 2013-07-23 06:29:30

解決方案5
0 2015-01-13 19:06:29

如果內容很少，如何將頁腳始終放在頁面底部？

問題描述

5 個解決方案

解決方案1 1 2013-07-23 06:19:25

解決方案2 0 2013-07-23 06:22:01

解決方案3 0 2013-07-23 06:23:36

解決方案4 0 2013-07-23 06:29:30

解決方案5 0 2015-01-13 19:06:29

解決方案1
1 2013-07-23 06:19:25

解決方案2
0 2013-07-23 06:22:01

解決方案3
0 2013-07-23 06:23:36

解決方案4
0 2013-07-23 06:29:30

解決方案5
0 2015-01-13 19:06:29