CSS Sticky Footer實現問題

Im有一些問題讓粘滯腳註在我的網站上工作。如果內容小於窗口，頁腳應該停留在窗口的底部，死區應該填滿div。我認爲CSS Sticky Footer這樣做，但我不能讓「推動div」工作推動內容一路下降。正如你所看到的，我的代碼不僅僅是body-wrapper-footer。CSS Sticky Footer實現問題

<body> 
    <div id="banner-bg"> 
    <div id="wrapper"> 
     <div id="header-bg"> 
     <!-- header stuff --> 
     </div> <!-- end header-bg --> 
     <div id="content-bg"> 
     <div id="content"> 
      <!-- content stuff --> 
     </div> <!-- end content --> 
     </div> <!-- end content-bg --> 
    </div> <!-- end wrapper --> 
    </div> <!-- end banner-bg --> 
</body> 

body { 
    color:    #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:   1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:   center; 
    padding:   0; 
    margin:    0; 
} 

#banner-bg { 
    width:    100%; 
    height:    9em; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: absolute; top: 0; 
} 

#wrapper { 
    width:    84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:    16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
    background-image: url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
}

我對CSS Sticky Footer-code應該放在哪裏感到困惑。

編輯，繼承人我得到了什麼，我想做什麼： alt text http://bayimg.com/image/gacniaacf.jpg

來源

2009-07-10 mdc

CSS Sticky Footer在FF3或IE8中都不適用於我。也許這是問題的一部分。 – Eric 2009-07-11 10:56:39

我已經更新了我的答案，以包含佈局的實際代碼示例。在IE8和FF2中爲我工作得很好。5 – ChssPly76 2009-07-12 04:48:57

你的HTML是一點點奇怪。例如，爲什麼banner-bg環繞一切？

也就是說，要使用粘滯頁腳技術，您需要將的所有內容除了頁腳合併到一個DIV中。因此，您的<body>標籤只能包含兩個頂級DIV - wrapper和footer。所有你現在擁有的東西都會進入包裝DIV。

請注意，如果您使用的背景圖像包含透明區域，粘滯頁腳可能不適用於您，因爲它依賴於標題覆蓋的背景wrapper。

更新：好的，這是有效的版本。「粘滯頁腳」樣式表來自cssstickyfooter.com，應該適用於所有現代瀏覽器。我簡化了一下HTML（根據圖片不需要單獨的背景圖層），但只要保持基本結構，您可以隨意修改它。另外，由於我沒有圖像，所以我添加了純色背景顏色用於說明目的，您需要將其刪除。

<html> 
<head> 
<style> 
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%} 
body > #wrap {height: auto; min-height: 100%} 
#main {padding-bottom: 100px} /* must be same height as the footer */ 
#footer {position: relative; 
    margin-top: -100px; /* negative value of footer height */ 
    height: 100px; 
    clear:both; 
} 
/* CLEAR FIX*/ 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden} 
.clearfix {display: inline-block} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%} 
.clearfix {display: block} 
/* End hide from IE-mac */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */ 

body { 
    background-image: url("Images/img.gif"); 
    background: #99CCFF; 
    color: #FFF; 
    font-size: 13px; 
    font-weight: normal; 
    font-family: verdana; 
    text-align: center; 
    overflow: auto; 
} 

div#banner { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 9em; 
    background: url("Images/img2.gif") repeat-x; 
    background: #000; 
} 

div#wrap { 
    background: #666; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#header { 
    height: 16em; 
    padding-top: 9em; /* banner height */ 
    background: url("Images/header/header-bg.png"); 
    background: #333; 
} 

div#footer { 
    background: #000; 
    width: 84em; 
    margin-left: auto; 
    margin-right: auto; 
} 

</style> 
</head> 
<body> 
<div id="banner">Banner</div> 
<div id="wrap"> 
    <div id="main" class="clearfix"> 
    <div id="header">Header</div> 
    <div id="content"> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content<br /> 
    Content 
    </div> <!-- end content --> 
    </div> <!-- end main --> 
</div> 
<div id="footer"> 
    Footer 
</div> 
</body> 
</html>

來源

2009-07-10 21:39:12 ChssPly76

banner-bg需要覆蓋屏幕（寬度）的100％，並且網站的其餘部分（包裝內部）應該只覆蓋固定寬度並居中放置在窗口中。我想不出任何其他方式來做到這一點。這是我有和想要的： http://img43.imageshack.us/img43/5470/sitestructure.png – mdc 2009-07-11 00:30:11

感謝您的更新，我將無法測試這幾天，但我會當我做的時候回信。如果它有效，你是最好的:) – mdc 2009-07-12 19:50:16

而不是修改現有的樣式（或使用CSS粘滯頁腳），它的很多容易，我只是重做。所以這裏有雲：

<html> 
<head> 
<style type="text/css"> 
html, body { 
    height: 100%; 
} 
#container { 
    height: 100%; 
    margin: 0 0 -200px 0; 
    position: relative; 
} 
#footer { 
    position: relative; 
    height: 200px; 
} 

</style> 
</head> 
<body> 

<div id="container"> 
    <div id="header">Oh Beautiful Header</div> 
    <div id="content">Lots of Content</div> 
</div> 
<div id="footer">Stay Put Little Footer</div> 
</body>

基本上陰性切緣應與頁腳的高度，高度100％需要被應用到HTML /身體，和相對位置應當申報。

同樣在參考xHTML時，請注意「footer」div如何不在「容器」div中，而是在其外部（以便有2個獨立的容器狀div，容器和頁腳）。

如果您仍然有問題，你的標記中的主要問題之一是：

100％的高度需要被宣佈爲HTML和body標籤。
緣陰性丟失在容器DIV這是＃旗幟-BG
如果頁腳是像素，高100，＃旗幟-BG應該有邊距：-100px

位置需要是相對的兩個＃橫幅-BG和#footer的

HTML {高度：100％;}

body { 
    color:      #00FFFF; 
    background-image: url("Images/img.gif"); 
    font-size:     1em; 
    font-weight:  normal; 
    font-family:  verdana; 
    text-align:     center; 
    padding:     0; 
    margin:      0; 
    height: 100%; 
} 

#banner-bg { 
    width:      100%; 
    height:      100%; 
    background-image: url("Images/img2.gif"); background-repeat: repeat-x; 
    position: relative; 
    margin: 0 0 -200px 0; 
} 

#wrapper { 
    width:      84em; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#header-bg { 
    height:      16em; 
    background-image: url("Images/header/header-bg.png"); 
} 

#content-bg { 
     background-image:  url("Images/img3.png"); background-repeat: repeat-y; 
} 

#content { 
    margin-right:  2em; 
    margin-left:  2em; 
} 
#footer { 
    position: relative; 
    height: 200px; 
}

，其餘：

<body> 
      <div id="banner-bg"> 
      <div id="wrapper"> 
       <div id="header-bg"> 
       <!-- header stuff --> 
       </div> <!-- end header-bg --> 
       <div id="content-bg"> 
       <div id="content"> 
        <!-- content stuff --> 
       </div> <!-- end content --> 
       </div> <!-- end content-bg --> 
      </div> <!-- end wrapper --> 
      </div> <!-- end banner-bg --> 
      <div id="footer"> 
      Footer Content 
      </div> 
     </body> 
</html>

來源

2009-07-10 23:39:11

我不知道是什麼置頂頁腳的意思做，當內容實際上長於你的頁面高度...... 如果要在浮動滾動的文本，然後我將使用Javascript計算底部座標，並將頁腳放置在固定位置的新圖層上。這可以做成相當跨瀏覽器友好以及...

來源

2009-07-15 13:04:53

這是很好能夠使用CSS和HTML單獨實現粘腳，但我不是調整我的標記/文檔結構一些化妝品。

我更喜歡JavaScript方法，沒有優雅的退化。如果沒有JS，沒有粘腳。我通常使用jQuery來實現：

jQuery的

$(window).resize(function() { 

    if ($('body').height() < $(window).height()) { 
     $('#footer').addClass('fixed'); 
    } 
    else { 
     $('#footer').removeClass('fixed'); 
    } 

}).resize();

CSS

#footer.fixed { position: fixed; bottom: 0; width: 100%; }

來源

2013-05-13 15:35:27

在這裏你可以找到一些代碼如下

添加CSS的以下行你的樣式表。 .wrapper中邊距的負值與.footer和.push的高度相同。負邊距應始終等於頁腳的整個高度（包括可能添加的任何填充或邊框）。

在CSS：

height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
}

關注這個HTML結構。沒有內容可以超出.wrapper和.footer div標籤，除非它完全使用CSS定位。在.push div中也應該沒有內容，因爲它是一個隱藏的元素，可以「向下」壓入頁腳，因此它不會與任何內容重疊。

在HTML正文：

你的網站內容在這裏。

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

來源

2013-07-08 10:58:12

CSS Sticky Footer實現問題

回答

相關問題