jquery - 删除 HTML 中 Slider 和 Footer Div 之间的间隙

Question

我有一个从互联网上下载的响应式图像 slider ，它应该占据全屏长度，我正在尝试降低高度并添加到我的网页中。 slider 的图像正在调整大小并且图像显示正确但是容器大小没有减少，因为 slider 和下一个 Div 之间有空白。现在在 slider 之后我有页脚 Div。两个工作都很好，即。 slider 和页脚。奇怪的是显示。Slider 和 Footer Div 之间有一些间隙。我尝试了所有方法将其删除但徒劳无功所以在这里发帖。

这是 HTML..

    <ul id="demo1" class="slides">
<li>
    <img src="slides/add1.jpg" />
    <!--Slider Description example-->
    <div class="slide-desc">
            <h2>Slider Title 1</h2>

        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>

        </p>
    </div>
</li>
<li>
    <img src="slides/add2.jpg" />
    <div class="slide-desc">
            <h2>Slider Title 2</h2>

        <p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a>

        </p>
    </div>
</li>

 <div id="footer" class="footer-shadow">
 <p>Hello Its me!!!</p>
 </div>

这是我创建的 fiddle 。 Fiddle

fiddle 中的代码很长，但我并没有缩短它，因为无法正确解释问题。 请帮助我消除两者之间的差距。

谢谢。

Answer 1

JSFIDDLE

好吧，我在你的代码中观察到了一些东西:

首先，对于 CSS 更改，没有要求将 bottom:0px 转换为 li 元素:

每当 css 中有 bottom:0px 和 top:0px 时，他们会认为父 div 的高度为 100%。

“right:0px”和“left:0px”也发生了同样的事情。如果两者都给出，那么他们将考虑为父 div 设置 100% 的宽度。

因此从 slides.each(function () { 函数中删除 'bottom': '0'。

此外，

.skdslider:after 和 .skdslider 类不需要填充。

改为使用 jQuery 提供动态高度。

对于 JS

将这一行添加到您的函数中:

$('.skdslider  .slides').css('height',$('.slides li').innerHeight());