如何在HTML和CSS中使用html對象編寫粘性頁腳？

我正在爲我設計的兩個網站使用Less Framework 4。在這兩種設計中，我都希望在文檔的頂部和底部應用5像素邊框。如何在HTML和CSS中使用html對象編寫粘性頁腳？

的問題：由於應用到體的風格，我在申請的下邊框和邊框頂到HTML對象，所以底部邊框永遠堅持喜歡它的頁面底部會在通常的粘性頁腳情況下發生。

下面是兩種情況的截圖：

Belgian client http://f.cl.ly/items/2X2B0R2f053N0h1T1j3Q/prikonline.png

下面是我使用HTML和身體（LESS）CSS：pastie.org/private/us5x1vhjnwzq6zsiycnu2g

html { 
    border-top: solid @black 10px; 
    border-bottom: solid @black 10px; 
    background: url('img/bg.png') repeat; 
} 

body { 
    width: @8col; 
    margin: 0px auto; 
    padding: 100px 48px 84px; 
    background: @white; 
    color: rgb(60,60,60); 
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ 
    font: 13px/20px 'OftenRegular'; 
    -webkit-tap-highlight-color: @green; 
}

我試過body和html這兩個物體都使用height: 100%，但下面是它的外觀：http://prikonline.be/prikactie/

我應該如何將邊框粘貼到頁面的底部？

來源

2011-06-05 João

á，請閱讀[標記幫助頁面]（http://stackoverflow.com/editing-help/），瞭解如何使代碼和圖像與您的問題/答案一致。 – 2011-06-05 10:01:19

是的，但是我沒有對您提交給我的文本進行的大部分修改的權限。不管怎麼說，還是要謝謝你！ – 2011-06-05 11:54:14

無論您的滾動狀態和內容高度如何，您都可以使用position:fixed;和bottom:0px;將其固定在底部。

來源

2011-06-05 09:54:11 Kissaki

邊界在'html'對象上被設置爲'border-top'和'border-bottom'，所以我想我不能只做那個定位。即使我添加了一些div而不是使用border屬性，我也不得不重寫應用於「body」的填充和邊距。 – 2011-06-05 09:57:21

所以這不是一個選項？你想用邊框來做？ – Kissaki 2011-06-05 10:01:49

如果沒有塊元素（'div'），你打算如何將頁腳（第一幅圖像）看起來直接放在底部邊界之上？ – Kissaki 2011-06-05 10:04:19

嘗試將其更改爲：

height:auto;

爲你的HTML CSS。

來源

2011-06-05 09:55:11

謝謝，馬修。沒有做到這一點，儘管:( – 2011-06-05 11:58:27

你可以改爲使用這樣的頁腳包裝。

.footer { 
    position: absolute; 
    bottom: 0; 
    border-bottom: solid @black 10px; 
    width: 100%; 
}

和</body>或服用點

<div class="footer"></div>

來源

2011-06-05 13:15:44 Fredrik

嗯......在html元素上刊登min-height: 100%您的網頁（Web檢查操作）之前剛剛插入此直接在Chrome爲我工作的時候了;你在測試什麼？

這種做法確實，但是，去，因爲邊界的高度，你可以與CSS box-sizing財產IE8 + /壁虎/ WebKit的修正（使用價值border-box）的一點點超過 100％。

對於IE7和IE6，如果你關心讓它們呈現相同的效果，那麼編寫一個小小的JavaScript，在加載或調整大小時，檢查窗口高度，比較文檔高度以及if必要的強制HTML元素的窗口高度減去20.

來源

2011-06-05 13:39:09 RwwL

它看起來像你使用某種動態樣式表工具（如LESS）。通常動態樣式表工具可以讓你使用JavaScript。所以，你可以定義高度：

@height: `window.innerHeight + 'px'`;

然後添加類似

body{ 
    ... 
    min-height: @height; 
}

當然，這樣做的問題是，如果用戶要調整他/她的瀏覽器窗口，佈局會沒有適當更新。你可以使用window.onresize回調來處理。

當然，你可以使用JavaScript來處理整個事情。當然，有些人強烈反對使用JavaScript做樣式（行爲，內容和樣式的分離），當嘗試像粘性頁腳這樣的東西時，有時候更容易寫兩行JavaScript，而不是試圖想出一些聰明的東西CSS可能會或可能不適用於您嘗試定位的每個瀏覽器。如果用戶關閉JavaScript，那麼該頁面不會填充內容較少的頁面的整個頁面高度。

window.onload = window.onresize = function(){ 
    document.body.style.minHeight = (window.innerHeight-204) + "px"; 
    // -4px for the border 
    // -200px for the padding on your body element 
}

來源

2011-06-05 13:41:38 Daniel

我不建議你將CSS應用到html元素。而是創建類似風格的div。在一般情況下，你的代碼是前人的精力像這樣：

HTML

<div id="wrapper"> 
    <!-- main content goes here --> 

    <div class="reserveSpace"></div> 
</div><!-- #wrapper end --> 

<div id="footer"></div>

CSS

* { margin: 0; padding: 0; } 
html, body { width: 100%; height: 100%; } 
#wrapper { min-height: 100%; height: auto !important; height: 100%; } 
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ } 
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

這完美的作品在所有瀏覽器，甚至在IE6 :)

來源

2011-06-05 13:50:33 Webars

「我不建議你將CSS應用到html元素」，但是接着你說'html，body {/ * style * /}'。我很困惑。您是不是建議設計'html'元素？ – jbrennan 2011-07-20 00:41:22

在99.9％的情況下 - 不是。但是如果想要拉伸#wrapper以適應整個屏幕，高度：100％是非常必要的。 – Webars 2011-07-20 04:23:11

您可以隨時實施這個工作粘頁腳CSS（我已添加內聯社交酒吧）：

.sticky-bar { 
    background: #000000; 
    bottom: 0; 
    color: #D3D3D3; 
    font-weight: 300; 
    left: 0; 
    margin: 0; 
    opacity: 0.9; 
    padding: 0em; 
    position: fixed; 
    width: 100%; 
    z-index:99999;} 

.sticky-bar-inner { 
    margin:0 auto; 
    text-align: center; 
    width:100%; 
    background-color: #D3D3D3; 
    padding: 3px; 
    font-family: 'Roboto', sans-serif; 
    font-size: 11px; 
    color: #000000; 
} 

.sticky-bar-inner p { 
    margin:0 auto; 
    padding: 3px; 
    text-align: center; 
    width:100%; 
    font-size: 11px; 

} 

#footerlist { 
    padding-left:0; 
} 

#footerlist li { 
    display: inline; 
    list-style-type: none; 
}

HTML：

<!-- Footer --> 
<div class="sticky-bar"> 
    <div class="sticky-bar-inner"> 
     <p>&#169;2015 The astrobox.io Project<p> 
     <ul id="footerlist"> 
      <li class="social"><a href="https://twitter.com/"><img src="#" height="42" width="42"></img></a></li> 
      <li class="social"><a href="https://github.com/"><img src="#" height="42" width="42"></img></a></li> 
      <li class="social"><a href="https://vimeo.com"><img src="#" height="42" width="42"></img></a></li> 
     </ul> 
    </div> 
</div>

只需編輯的HREFs到自己的個人網址和圖片src到你想要的（或者包括字體真棒包，如果你有的話）的社會風格的圖像。

來源

2015-02-28 10:47:10

這是我如何在底部增加了一個體邊界：

body { 
 
    box-sizing: border-box; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
    border-bottom: solid 5px #ad3127; 
 
    padding-top: 1px; 
 
}

<p>content</p>

的關鍵是min-height: 100vh，這保證了車身高度將至少視口的高度。由於box-sizing: border-box，身體的邊界將被計入身高。仍然存在內容邊距在視口下推送邊框的問題，但可以使用任意值padding-top修復該問題。

來源

2015-09-07 09:18:23 Rokin

如何在HTML和CSS中使用html對象編寫粘性頁腳？

回答

相關問題