如何將頁腳欄放在網站的最底部？

問題是頁腳導航欄不會在瀏覽器底部一路位置如下所示： enter image description here

有一點藍色間距，這不是我想要實現的。

我使用Twitter的引導，有沒有什麼幫助，但頁腳欄的div對象被稱爲「導航欄導航欄默認」

如果我命名頁腳的div像這樣：

<div class="navbar navbar-default navbar-fixed">

然後，導航欄將粘貼到瀏覽器窗口的最底部，但它保持不變，這不是我想要的。

目前，代碼如下所示：

<div class="navbar navbar-default navbar-fixed">

我如何能實現我的目標是什麼？

感謝

編輯：我很抱歉，夥計們，我的網站有固定的頁腳，但如果代碼沒有頁腳酒吧固定的，它會有間距。我對這種混亂表示抱歉。

來源

2014-07-24 user1631224

看一看：http://getbootstrap.com/examples/sticky-footer/ – 1andsock

看起來正確的鉻 – rlatief

我很抱歉，請看看我最後的評論。 – user1631224

我不熟悉Twitter的引導，但間距很可能是由填充或保證金某處body標籤之間產生，和/或footer標籤以及其中的所有內容。在Chrome的代碼檢查器中，我看到<div class="navbar...">中計算的margin值爲20px，<body>中的值爲60px。

簡單的測試方法是修改<div class="navbar">：

<footer> 
    <div class="navbar navbar-default" style="margin: 0;">

看看是否有任何改變。如果不是：

<body style="margin: 0;">

測試在Chrome的代碼檢查和頁腳放置在底部沒有任何間距（和不「粘」），但它是一個黑客，所以你也許應該尋找更好的方式/以遵循引導程序的邏輯。

來源

2014-07-24 18:05:19 rlatief

保證金：0，非常感謝！ – user1631224

試試這個

你可以試試這個

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/*Opera Fix*/ 
body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/ 
}

這一個HTML

下面是HTML代碼的基本結構。你會注意到頁腳是如何坐在外面的。

<div id="wrap"> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div>

你會把你的內容元素放在main中。例如，如果您使用的是2列浮動佈局，則可能會出現這種情況;

<div id="wrap"> 

    <div id="main"> 

     <div id="content"> 

     </div> 

     <div id="side"> 

     </div> 

    </div> 

</div> 

<div id="footer"> 

</div>

一個標題可以放在包裝內，但在主要上面這樣;

<div id="wrap"> 

    <div id="header"> 

    </div> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div>

來源

2014-07-24 17:48:33 ivanfromer

這是我能夠獲得標題/正文/頁腳正常工作的最簡單方法。 Demo

HTML

<div class="wrap"> 
    <div class="header"> 
    </div> 
    <div class="body"> 
    </div> 
</div> 
<div class="footer"> 
</div>

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 
.header { 
    height: 100px; 
    background-color: red; 
} 
.wrap { 
    height: 100%; 
    background-color: green; 
    margin-bottom: -100px;   /* Must be negative height of footer */ 
} 
.footer { 
    height: 100px; 
    background-color: blue; 
}

來源

2014-07-24 18:01:27 Tricky12

如何將頁腳欄放在網站的最底部？

回答

相關問題