堆棧內存溢出
  簡體   English   中英

在頁面底部出現粘性頁腳問題

[英]Issue with sticky footer at the bottom of the page

 原文  2014-11-06 08:23:36  9   10    javascript/ jquery/ html/ css

問題描述

我正在編寫代碼編輯器的網頁 。

我有一個粘性頁腳（意思是堅持頁面的底部，無論如何）。

然而，雖然我不知道怎么樣，突然之間我必須調整一些東西然后再次取消。

粘性頁腳

猜猜看，我無法修復它。 ：S（ 我必須承認CSS從來都不是我的事...... ）

有任何想法嗎？

PS這個問題在所有頁面/子頁面中都很明顯，而不僅僅是主頁。

更新：

伙計們，非常感謝您的超快回復。 我認為你做對了。 但不是100％ - 也許我沒有解釋清楚我需要什么。

添加position:fixed 不其固定在底部。 但是，讓我們說在主頁中，頁腳位於內容之上（如頂部導航欄）。 這不是我需要的。 通過“粘性”，我的意思是它必須保持在頁面的底部。 如果它是一個短頁面，那么它將出現在底部。 如果它是一個長頁面，只有在頁面的最底部滾動時才會看到它。

10 個解決方案

解決方案1
 2  2014-11-06 08:25:37

將#footer位置更改為fixed似乎工作正常。

http://css-tricks.com/snippets/css/fixed-footer/

UPDATE

更新后：刪除body-bottom：45px在body元素上並添加min-height：100％ 

body {
    /* margin-bottom: 45px; */
    position: relative;
    min-height: 100% /* for short pages */
}

然后頁腳位置可以保持絕對。

UPDATE 

html {
    height: 100%;
}

解決方案2
 1  2014-11-06 08:26:07

更改 

#footer {
position: absolute;
...

至 

#footer {
position: fixed;
...

解決方案3
 1  2014-11-06 08:26:34

為了制作一些東西，它應該在你的CSS中有一個固定的位置。

您可以在此處找到更多相關信息： http ： //www.w3schools.com/css/css_positioning.asp

確保您的頁腳及其周圍的所有div也設置為固定。

編輯：

如果您希望您的頁腳僅出現在最底部，請將頁腳的頁邊距設置為0px，如下所示： 

#footer {

    margin-bottom: 0px;

}

解決方案4
 1  2014-11-06 08:28:00

嘗試這個： 

#footer {
    background: none repeat scroll 0 0 #ddd;
    border-top: 1px solid #aaa;
    bottom: 0;
    color: #666;
    font-family: "Helvetica Neue",Helvetica,arial,freesans,clean;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: fixed;
    width: 100%;
}

剛剛將位置改為固定。

解決方案5
 1  2014-11-06 08:29:37

你需要用底部固定的位置：0 

 #footer {
position: fixed;
bottom:0;
}

解決方案6
 1 已采納  2014-11-06 09:39:04

我很驚訝沒有人能夠正確回答你的問題，因為你已經清楚地解釋了它。

這就是你只使用css的方法。 假設這是你的html標記： 

<div class="wrapper">
     <p>Your website content here.</p>
</div>

<div class="footer">
     <p>Copyright (c) 2008</p>
</div>

css應如下所示： 

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    /* equal to footer height: */
    margin-bottom: -140px;
 }

.footer {
    height: 140px;
}

鏈接： http ： //css-tricks.com/snippets/css/sticky-footer/

解決方案7
 1  2014-11-06 09:55:32

實際上，有幾種方法可以在頁面底部粘貼頁腳。 看來你正在使用馬修詹姆斯泰勒的方法 ，但你的代碼中有錯誤。

假設給定的標記： 

<body>
    <div class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="main"></div>
    <div id="footer"></div>
</body>

您可以按照以下步驟解決問題並獲得粘性頁腳：

  1. <html>的顯式height應為100% 。
  2. <body>應該有：
    1. min-height為100% 。
    2. 相對定位。 即position: relative 。
    3. 底部填充作為粘性頁腳的高度。
  3. #main應該有一個頂部填充作為固定標題的高度（由您決定）。
  4. #footer應該absolute位於底部 - position: absolute; bottom: 0; position: absolute; bottom: 0; 。

最后，設置box-sizing: border-box; 對所有元素* {...}強制瀏覽器計算包括邊框和填充在內的框的大小。

全力以赴 - 示例 

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 45px; /* height of the footer */
}

.navbar {
  height: 30px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

#main {
  padding-top: 30px; /* height of the fixed positioned header */
}

#footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45px;
}

解決方案8
 0  2014-11-06 08:28:38

粘性頁腳是最簡單的東西： DEMO 

footer{
    width:100%;
    height:50px;
    background-color:black;
    position:fixed;
    top:100%;
    left:0;
    margin-top:-50px;
}

解決方案9
 0  2014-11-06 08:42:00

為了更好地理解CSS，您應該了解“位置”值的工作原理。 html網站中所有元素的默認值為： 

position:static;

對於你自己的問題，現在的position:fixed是你的解決方案，但不要只使用它，並通過它學習任何東西。 您可以輕松地嘗試位置值，以查看它們在html文檔中的工作方式。

例如，首先使用position絕對位置並添加一個固定onscroll位置的動畫類將為您提供非常好的滾動效果。

您可以查看這篇非常詳細的文章： https ： //developer.mozilla.org/en-US/docs/Web/CSS/position 。 最后，我給你答案： 

   #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/ *更新

使用純CSS無法實現粘性頁腳效果。 問題是你需要一個函數來測量窗口的高度，並從頂部給頁腳提供正確的邊距。
為了實現這一點，你可以使用這個jQuery片段（希望你安裝了jQuery）： 

$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});

解決方案10
 0  2014-11-06 08:54:51

你能用javascript嗎？ 如果是這樣，那么你可以在頁面的末尾或超時運行這個javascript：

編輯（我不是強迫使用javascript，還有很棒的CSS答案:) 

 var setPosition = function(){ var foot = document.getElementById('gridContainer2'); foot.style.position = "relative"; if((foot.offsetTop + foot.offsetHeight) >= window.innerHeight){ foot.style.position = "fixed"; } else{ foot.style.position = "relative"; //or whatever you wish } } setTimeout(function(){ setPosition(); window.onresize = function(){setPosition();}; },10);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 沒有頁面換行的粘頁腳 在滾動“粘性元素”上，需要堅持到“頁腳區域”之前而不是頁面底部 當我在頁面底部觸摸下拉按鈕時，粘性導航欄會抬起我的頁腳 身體高度為100％時將腳注粘到底部 粘性頁腳始終位於屏幕底部（而非網頁） 滾動后粘性頁腳不停留在底部 如果我沒有太多內容，如何在頁面底部獲得頁腳，但我不希望粘貼頁腳 將頁腳停留在頁面底部 將頁腳放在頁面底部 將頁腳放在頁面底部
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM