html - div 的背景图像不触及页面底部

Question

我会尽力解释这一点。我现在正在开发一个网站，我希望我的一个 div 的背景图片位于页脚后面。

当图像的高度为 450px 时，我可以正常工作，但是当我尝试将其更改为 350px 时，它和页脚之间有空白。好像现在它和页面底部之间有 100px 的空间。

在 Chrome 中，无论大小，它看起来都很好，但在所有其他浏览器中，它会产生空白。

这是我当前的页脚 div 和无法正常工作的 div 的 HTML 和 CSS。

<div class="testimonials">
    <div class="col-md-8 text-center">
        <?php dynamic_sidebar( 'testimonial-widget' ); ?>
    </div>
    <div class="col-md-4">
    </div>
</div>

<footer class="navbar-bottom">
    <div class="row">
        <div class="col-md-12 text-center">
        <p class="footer-content">Some content...</p>

        <p class="footer-content-mobile">Some content...</p>
        </div>
    </div>

    <img src="/wp-content/themes/tct/inc/assets/footer.png" />
</footer>


.testimonials {
     background-image: url('/wp-content/themes/tct/inc/assets/mug.jpg');
     background-size: cover;
     background-position: 100% 70%;
     background-repeat: no-repeat;
     height: 350px;
     margin-bottom: -300px;
     font-size: 24px;

}

footer {
     word-wrap: normal;
     position: absolute;
     bottom: 0;
     width: 100%;
}

footer a {
     color: #ffffff;
}

footer a:visited {
     color: inherit;
}

footer a:hover {
     color: #404040;
}

@media (min-width: 981px) {
     footer img {
         height: 300px;
         width: 100%;
         top: -9999px;  
         z-index: 10;
     }

     .footer-content-mobile {
         display: none;
     }
}

.footer-content {
     color: #ffffff;
     position: absolute;
     left: 0;
     right: 0;
     top: 250px;
     margin: 0 auto;
     font-size: 20px;
     padding-bottom: 10px;
}

.bullet {
     margin-left: 20px;
     margin-right: 20px;
}

最后，这是它应该看起来如何(在 Chrome 中看起来不错)和它不应该看起来如何(在所有其他浏览器中看起来如何)的屏幕截图。

正确:

不正确:

希望我对所有内容的解释都足够让您理解我的问题。如果我需要提供任何其他信息，请告诉我。

链接到我正在使用的图像: 马克杯:http://i60.tinypic.com/f4g3t3.jpg 页脚:http://i59.tinypic.com/xfq6x5.png

Answer 1

尝试将所有这些包装到另一个容器中并为其设置明确的高度和position: relative

.wrapper {
    height: 370px;
    position: relative;
    overflow: hidden;
}
.testimonials {
     background-image: url('http://oi60.tinypic.com/f4g3t3.jpg');
     background-size: cover;
     background-position: 100% 70%;
     background-repeat: no-repeat;
     height: 350px;
     margin-bottom: -300px;
     font-size: 24px;

}

footer {
     word-wrap: normal;
     position: absolute;
     bottom: 0;
     width: 100%;
}

footer a {
     color: #ffffff;
}

footer a:visited {
     color: inherit;
}

footer a:hover {
     color: #404040;
}

@media (min-width: 981px) {
     footer img {
         height: 300px;
         width: 100%;
         top: -9999px;  
         z-index: 10;
     }

     .footer-content-mobile {
         display: none;
     }
}

.footer-content {
     color: #ffffff;
     position: absolute;
     left: 0;
     right: 0;
     top: 250px;
     margin: 0 auto;
     font-size: 20px;
     padding-bottom: 10px;
}

.bullet {
     margin-left: 20px;
     margin-right: 20px;
}

<div class="wrapper">
<div class="testimonials">
    <div class="col-md-8 text-center">
        <?php dynamic_sidebar( 'testimonial-widget' ); ?>
    </div>
    <div class="col-md-4">
    </div>
</div>

<footer class="navbar-bottom">
    <div class="row">
        <div class="col-md-12 text-center">
        <p class="footer-content">Some content...</p>

        <p class="footer-content-mobile">Some content...</p>
        </div>
    </div>

    <img src="http://oi59.tinypic.com/xfq6x5.jpg" />
</footer>
</div>