頁腳，應該低於所有內容，但不是固定的

我有一個網站有兩個頁腳。其中一個很好地表現爲頁面底部始終可見的「固定」頁腳。另一個頁腳較大，並且應該低於所有內容，只有當所有內容滾動時纔會出現（如果內容比頁面大，則在滾動到底部之前不應該可見）。但是，它確實需要粘性，以便如果內容非常少，它不會騎上去，並留下尷尬的白色空白。頁腳，應該低於所有內容，但不是固定的

現在它顯示在頁面中間。 :(幫助？

html, body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
#PageContainer { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
header { 
 
\t width: 100%; 
 
} 
 

 
#Content { 
 
\t position: relative; 
 
\t background-image:url(Images/Golf%20Ball%20Texture.jpg); 
 
\t background-repeat:repeat; 
 
\t background-size: 150px auto; 
 
\t width: 100%; 
 
\t padding-left: 20px; 
 
\t margin-left: -20px; 
 
\t padding-right: 20px; 
 
\t margin-right: -20px; 
 
\t min-height: 90%; 
 
} 
 

 
footer { 
 
\t width: 100%; 
 
} 
 

 
#MovingFooter { 
 
\t clear: both; 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t background-color: #FFD600; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t font-size: .9em; 
 
} 
 

 
#StickyFooter { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t background-color: #787878; 
 
\t padding-left: 20px; 
 
\t margin-left: -20px; 
 
\t padding-right: 20px; 
 
\t margin-right: -20px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 

 
<meta charset="UTF-8"> 
 
<link rel="Stylesheet" href="../style.css" type="text/css" /> 
 
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico"> 
 

 

 
<title>Your Personality</title> 
 

 

 

 
</head> 
 

 
<div id="PageContainer"> 
 
<header> 
 
</header> 
 

 
<body> 
 

 
<div id="Content"> 
 
</div> <!--id="Content"--> 
 

 

 

 

 
<div id="MovingFooter"> 
 
<h2>Company Philosophy</h2> 
 
<p>Footer content</p> 
 
</div> <!--class="FooterThirds" --> 
 

 

 
</div> <!-- class="ThirdsContainer" --> 
 
</div> <!-- id="MovingFooter" --> 
 

 
<div id="StickyFooter"> 
 
<p class="FancyFinePrint">&copy; Copyright 2014 by <a href="http://www.geneticgolf.com">Company Name</a>. All Rights Reserved.</p> 
 
<div id="FooterPartners"> 
 
<p class="FooterPartnerText">Proud Partners With:</p> 
 
</div> <!-- id="FooterPartners" --> 
 
</div> <!-- id="StickyFooter" --> 
 
</div> <!-- id="PageContainer" --> 
 

 
</body>

來源

2015-06-01 Liz

http://jsbin.com/kevoba/1/edit「頁面中部」？大概我不知道什麼意思*中* *？ –

這裏你去：https://css-tricks.com/snippets/css/sticky-footer/ –

這就是你想要的？ https://jsfiddle.net/lmgonzalves/c5vL77oz/ – lmgonzalves

您正在尋找像FooterStickAlt的技術，這使下面的內容頁腳，而且還使頁腳在視口的底部，如果內容ISN如此高到足以將它推下去那麼遠

簡而言之，除了頁腳以外的所有內容都被包含在一個包含min-height: 100%的元素中，然後頁腳被上拉爲負值，這種特殊技術是必需的知道你粘的高度頁腳。

https://css-tricks.com/snippets/css/sticky-footer/和http://cssstickyfooter.com是相同的想法。

來源

2015-06-01 21:05:57 simmer

頁腳，應該低於所有內容，但不是固定的

回答

相關問題