删除 HTML 中 Slider 和 Footer Div 之间的间隙答案

【问题标题】：Remove Gaps between Slider and Footer Div in HTML删除 HTML 中 Slider 和 Footer Div 之间的间隙
【发布时间】：2014-08-08 04:45:35
【问题描述】：

我有一个从互联网下载的响应式图像滑块，它应该占用全屏长度，我试图降低高度并添加到我的网页中。滑块的图像正在调整大小并且图像正确显示但是容器大小并没有减少，因为滑块和下一个 Div 之间有空格。现在在滑块之后我有页脚 Div 。两者的工作都很好，即。滑块和页脚。奇怪的是显示。滑块和页脚 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

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

谢谢。

【问题讨论】：

@ChakravarthySM 我无法找到top:0px; ..
@ChakravarthySM 我们是否需要更改 jquery 脚本中的某些内容

标签： jquery html css

【解决方案1】：

JSFIDDLE

嗯，我在你的代码中观察到了一些东西：

首先对于 CSS 更改不需要将 bottom:0px 转换为 li 元素：

只要有bottom:0px和top:0px在css中给出，当时他们认为父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());

【讨论】：

好的。我知道了现在一个小查询滑块和页脚之间还有一些空间。如何删除？
这是由于 p 标签中的边距。添加 css 如下： .footer-shadow p { margin:0px; }
我补充说还有一些空间。我也想删除它。这是更新的小提琴http://jsfiddle.net/vikas13pandey/pvxa4trb/16/
伙计，该空间是由于默认行高。如果你不想这样设置 line-height:0px : .footer-shadow p { line-height:0px;边距：0px； }
还是同样的问题。我在滑块和页脚之间添加了一个 div。请看小提琴..http://jsfiddle.net/vikas13pandey/pvxa4trb/21/

【解决方案2】：

您正在使用的滑块插件将:after 选择器添加到滑块 DOM，该滑块具有一些 CSS 属性，包括 padding-top。删除它应该会有所帮助......

只需删除 .skslider 的 after 属性中的 reduce padding-top:50% 即可。这导致了滑块 DOM 之后的巨大填充。

.skdslider:after {
content: '';
padding-top: 50%; //Decrease this.....
display: block;
}

【讨论】：