页脚应位于所有内容下方，但未固定

Question

我的网站有两个页脚。一个作为 'fixed' 页脚表现得非常好，它始终显示在页面底部。另一个页脚较大，应位于所有内容下方，仅在滚动浏览所有内容时出现（如果内容大于页面，则在滚动到底部之前不可见）。但是，它确实需要具有粘性，这样如果内容很少，它就不会向上移动并留下尴尬的白色间隙。

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

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

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

header {
 width: 100%;
}

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

footer {
 width: 100%;
}

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

#StickyFooter {
 position: fixed;
 bottom: 0;
 width: 100%;
 height: 50px;
 background-color: #787878;
 padding-left: 20px;
 margin-left: -20px;
 padding-right: 20px;
 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>

Answer 1

您正在寻找一种类似 FooterStickAlt 的技术，它可以使页脚保持在内容下方，但如果内容不够高，无法推动它，也可以将页脚保持在视口底部这么远。

简而言之，除了页脚之外的所有内容都包含在具有 min-height: 100% 的包含元素中，然后页脚以负的上边距拉起。这种特殊技术需要知道粘性页脚的高度。

https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com同理

页脚应位于所有内容下方，但未固定

Footer That Should Be Below All Content, but Not Fixed

css

footer

sticky-footer