页脚，应该低于所有内容，但不是固定的

我有一个网站有两个页脚。其中一个很好地表现为页面底部始终可见的“固定”页脚。另一个页脚较大，并且应该低于所有内容，只有当所有内容滚动时才会出现（如果内容比页面大，则在滚动到底部之前不应该可见）。但是，它确实需要粘性，以便如果内容非常少，它不会骑上去，并留下尴尬的白色空白。页脚，应该低于所有内容，但不是固定的

现在它显示在页面中间。 :(帮助？

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

页脚，应该低于所有内容，但不是固定的

回答

相关问题