背景图像突出在粘性页脚下方

Question

我刚刚在主页上的 div 添加了背景图片，它位于我的页眉和页脚之间，这导致我的粘性页脚位于 [=31= 的底部] 而不是在背景图片下方 - 所以背景图片突出在页脚下方...我怎样才能让我的粘性页脚与背景图片一起位于 div 下方？

这是我的 HTML:

<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>

还有我的 CSS:

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;
}

最后 JavaScript

$(function() {
      var images = ['hero1.jpg', 'hero2.jpg', 'hero3.jpg', 'hero4.jpg', 'hero5.jpg', 'hero6.jpg', 'hero7.jpg', 'hero8.jpg', 'hero9.jpg'];
      $('#hero').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
     });

关于导致跳跃的原因有什么想法吗？

这是有问题的页面 - http://japesfawcett.com/testsh/hometest.html

Answer 1

在查看您的代码后，（正如 MinusFour 所指出的那样）。您的问题是 #hero div.

上的 min-width:100%

删除它，您将恢复业务！

Min-height 100% 表示 div 的最小高度是 window 的 100%。这导致您的页脚位于 window 的 bottom 而不是页面。

JSFiddle 向您展示了变化。

解决方案 2：

好的，试试这个：

这是您的新 HTML 结构。我保留了您所有的原始 class 名称，因此您不必重命名所有内容...

        <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 的主要部分，但我确实使用您的整个创建了 JSFiddle main.css 文件，所以它应该只是一个 copy/paste 解决方案。抱歉 CSS 在 fiddle.

中有点混乱

* {
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;
}

这里是Full Screen JSFiddle

这里是Code View JSFiddle

希望这能解决您的问题！让我知道！

*您可能需要在页眉上添加一些 z-index，但这是一个小改动。

背景图像突出在粘性页脚下方

Background Image Sticking Out Below Sticky Footer

html

javascript

css

background-image

sticky-footer