Question

我有一个有两个页脚的网站。一个人表现得很好，作为一个“固定”的页脚，总是在页面底部可见。另一个页脚较大，应低于所有内容，仅在滚动所有内容时显示（如果内容大于页面，则在滚动到底部之前不应显示）。但是，它确实需要粘性，因此如果内容很少，它就不会翘起并留下一个尴尬的白色空隙。

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

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/和http://cssstickyfooter.com是相同的想法。

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

1 个答案: