Question

我刚刚在我的主页上添加了一个背景图片，它位于我的页眉和页脚之间，这导致我的粘性页脚位于窗口底部而不是背景图像下方 - 所以背景图像突出于页脚下方...如何让我的粘性页脚与背景图像一起位于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

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

以下是 Full Screen JSFiddle

以下是 Code View JSFiddle

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

*您可能需要在标题上混淆z-index，但这只是一个小小的改动。

在粘性页脚下面伸出的背景图象

1 个答案: