引導與網站

Question

底部粘頁腳重疊我用下面的標記來創建一個底部版權標誌

<footer class="footer"> 
    <div class="container"> 
     <p class="text-muted">© Some Company</p> 
    </div> 
</footer> 

這裏是CSS

/*   Sticky footer styles 
     -------------------------------------------------- */ 
    html { 
     position: relative; 
     min-height: 100%; 
    } 
    body { 
     /* Margin bottom by footer height */ 
     margin-bottom: 60px; 
    } 
    .footer { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     /* Set the fixed height of the footer here */ 
     height: 60px; 
     background-color: #f5f5f5; 
    } 


    /* Custom page CSS 
    -------------------------------------------------- */ 
    /* Not required for template or sticky footer method. */ 

    body > .container { 
     padding: 60px 15px 0; 
    } 
    .container .text-muted { 
     margin: 20px 0; 
    } 

    .footer > .container { 
     padding-right: 15px; 
     padding-left: 15px; 
    } 

    code { 
     font-size: 80%; 
    } 

的問題是，它與底部重疊部分網站內容。

我該如何強制它進一步下降？

我沒有運氣這個CSS

.navbar-fixed-bottom { 
     padding-top: 10px; 
     height: 5%; 
    } 

Answer 1

嘗試將邊緣到頁面的底部，並在.footer CSS類設置position: fixed;：

body { 
margin-bottom: 50px; 
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
} 

這裏是一個working example of your code和example from the bootstrap documentation。

Answer 2

html { 
     position: relative; 
     min-height: 100%; 
    } 
    body { 
     /* Margin bottom by footer height */ 
     margin-bottom: 60px; 
    } 
    .footer { 

     position: absolute; 
     /*this controls how far bottom the banner goes*/ 
     top: 110%; <---- THIS WAS THE MISSIN PIECE 
     bottom: 0; 
     width: 100%; 
     /* Set the fixed height of the footer here */ 
     height: 60px; 
     background-color: #f5f5f5; 
    } 


    /* Custom page CSS 
    -------------------------------------------------- */ 
    /* Not required for template or sticky footer method. */ 

    body > .container { 
     padding: 60px 15px 0; 
    } 
    .container .text-muted { 
     margin: 20px 0; 
    } 

    .footer > .container { 
     padding-right: 15px; 
     padding-left: 15px; 
    } 

    code { 
     font-size: 80%; 
    } 

Answer 3

增加內容容器的底部填充。

如果這是頁面內容（我不知道，因爲你沒有張貼頁面的完整的HTML結構）的規則......

body > .container { 
     padding: 60px 15px 0; 
    } 

...然後改變最後「0」至少60px（嘗試不同的值）：

body > .container { 
     padding: 60px 15px 80px; 
    }