我刚刚在我的主页上添加了一个背景图片，它位于我的页眉和页脚之间，这导致我的粘性页脚位于窗口底部而不是背景图像下方 - 所以背景图像突出于页脚下方...如何让我的粘性页脚与背景图像一起位于div下方？
这是我的HTML：
cd F:我的CSS：
<body>
<header style="position: static;">
<div class="wrapper">
<div class="search" style="float: left; width: 20%; position: absolute; left: 0;">
<input type="text" class="st-default-search-input" contenteditable="true" style="background-color: #fff; border: 1px solid #EEE1DC; color: #000; font-weight: 400; float: left;">
</div>
<div class="social" style="right: 0; position: absolute;">
<a href="http://instagram.com" target="_blank"><img src="images/insta-ico.png" /></a>
<a href="http://facebook.com" target="_blank"><img src="images/fb-ico.png" /></a>
<a href="mailto:info@summerheart.co.za"><img src="images/email-ico.png"/></a>
</div>
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="home.html" aria-haspopup="true">HOME</a></li>
<li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
<li><a href="about.html" aria-haspopup="true">ABOUT</a>
<li><a href="sizing.html">SIZING</a></li>
<li><a href="video.html">VIDEO</a></li>
<li><a href="press.html">PRESS</a></li>
<li><a href="social.html">SOCIAL</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div id="hero"></div>
<!--<div style="background-color: #FAEDE8; z-index: 0; position: inherit;">
<p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
</div>-->
<footer>
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li><a href="privacy.html">PRIVACY POLICY</a></li>
<li><a href="terms.html">TERMS OF USE</a></li>
<li><a href="customer.html">CUSTOMER SERVICE</a></li>
<li><a href="orders.html">ORDERS</a></li>
<li><a href="returns.html">RETURN POLICY</a></li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
最后是JavaScript
body {
background-color: #FAEDE8;
font-family: 'Open Sans', sans-serif;
margin: 0 0 50px;
overflow: auto;
overflow-x: hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
height: 50px;
width: 100%;
background-color: #FAEDE8;
color: #000;
overflow: hidden;
}
#hero {
position: absolute;
min-height: 100%;
background-size: cover;
width: 100%;
background-repeat: no-repeat;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
overflow-y: auto;
}
有关导致跳跃的原因的任何想法？
这是有问题的页面 - http://japesfawcett.com/testsh/hometest.html
答案 0 :(得分：1)
看了你的代码，（和MinusFour一样）指出。您的问题是min-width:100% div上的#hero。
删除此项，您将重新开始营业！
最小高度100％意味着div最小的可能就是100％的窗口。这导致您的页脚位于窗口的bottom而不是页面。
以下是 JSFiddle ，向您显示更改。
解决方案2：
好的，试试看：
以下是您的新 HTML结构。我保留了所有原始的班级名称，因此您不必重命名所有内容......
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="home.html" aria-haspopup="true">HOME</a></li>
<li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
<li><a href="about.html" aria-haspopup="true">ABOUT</a>
<li><a href="sizing.html">SIZING</a></li>
<li><a href="video.html">VIDEO</a></li>
<li><a href="press.html">PRESS</a></li>
<li><a href="social.html">SOCIAL</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="hero"></div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li><a href="privacy.html">PRIVACY POLICY</a></li>
<li><a href="terms.html">TERMS OF USE</a></li>
<li><a href="customer.html">CUSTOMER SERVICE</a></li>
<li><a href="orders.html">ORDERS</a></li>
<li><a href="returns.html">RETURN POLICY</a></li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
以下是我添加到 CSS 的主要部分，但我确实使用整个 main.css文件创建了JSFiddle，因此应该只是一个复制/粘贴解决方案。对于小提琴中的CSS有点混乱道歉。
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
position: absolute;
z-index: -94;
display: block;
top: 0;
height: 100%;
width: 100%;
}
.footer, .push {
height: 4em;
z-index:12;
position:absolute;
}
.footer, .push {
clear: both;
}
希望这能解决您的问题！让我知道！
*您可能需要在标题上混淆z-index，但这只是一个小小的改动。