製作頁腳粘貼到頁面底部，並在頂部有一個固定的導航

正如您可以通過標題所告訴的，我希望將頁腳粘到底部。我知道那裏有很多話題。我已經讀過它們。但由於我的導航功能固定在頂部，所以無法工作。製作頁腳粘貼到頁面底部，並在頂部有一個固定的導航

佈局看起來是這樣的：

<header class="navbar navbar-fixed"> 
</header> 
<div class="content"> 
    <div class="container"> 
    </div> 
    <div class="clearfooter"></div> 
</div> 
<footer> 
</footer>

這裏是CSS：

html, body { 
    height: 100%; 
} 

body { 
    padding-top: 40px; /* height of the navbar */ 
} 

.navbar-fixed { 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 1030; 
} 

.content { 
    margin-bottom: -30px; 
    min-height: 100%; 
    position: relative; 
} 

.clearfooter { 
    clear: both; 
    height: 30px; 
} 

#footer { 
    height: 30px; 
    position: relative; 
}

我想這tutorial。但是頁腳並未固定在窗口底部（不在視口中）。我已經嘗試過用額外的填充/保證金修復它，但沒有什麼工作:(

來源

2012-01-15 Sebastian Sebald

爲什麼你的#footer的位置是：相對的;不是位置：固定; ？ – Sohail 2012-01-15 15:01:33

而不是添加填充到身體來推動你的頁面只需創建一個push div來增加一些空間帶你的固定標題和內容，像這樣：

HTML

<div class="push">&nbsp;</div>

CSS

.push { height:40px; } 

.push:before, .push:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
} 

.push:after { 
    clear: both; 
}

這裏是一個演示：

http://jsfiddle.net/andresilich/fVpp2/1/show/

在這裏編輯http://jsfiddle.net/andresilich/fVpp2/1/

注意：添加了一束斷行來說明頁腳的位置。

（編輯：切的jsfiddle我的CSS，添加了回去。）

來源

2012-01-16 16:08:43

工作。 ty非常多:) – 2012-01-16 16:54:01

我做了一個實驗，它的工作，這裏是HTML：

<body> 
    <div class="wrapper"> 
     <div class="header"> 
     </div> 
     <div class="contain"> 
     </div> 
     <div class="footer"> 
     </div> 
    </div> 
</body>

和CSS：

.header { 
     height: 100px; 
     background-color: red; 
    } 

    .contain { 
     height:1500px; 
     background-color: black; 
    } 

    .wrapper { 
     width: 960px; 
     background-color: yellow; 
     margin: 0 auto; 
    } 
    body { 
     margin: 0; 
    } 

    .footer { 
     height: 200px; 
     background-color: blue; 
    }

它有固定的頁眉和頁腳，我希望你能得到它的線索

來源

2012-01-15 15:07:29 Sohail

對不起，我可能沒有正確解釋它。標題應該是固定的，但不是頁腳。頁腳應始終位於視口的底部。但是，如果視口太小，應該在內容之後顯示。 – 2012-01-15 21:11:04

製作頁腳粘貼到頁面底部，並在頂部有一個固定的導航

回答

相關問題