Question

我有一个响应式图像滑块，我已经从互联网下载，它应该采取全屏长度我正在尝试降低高度并添加到我的网页。滑块的图像调整大小，图像显示正常但是由于滑块和下一个Div.Now之后滑块我有页脚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

小提琴中的代码很长但我不能缩短它，因为探测器无法正确解释。请帮助我消除两者之间的差距。

谢谢。

Answer 1

JSFIDDLE

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

首先对于CSS更改，bottom:0px无需li元素：

每当在css中给出bottom:0px和top:0px时，他们就会考虑父div的100％高度。

同样的事情发生在'right：0px'和'left：0px'。如果给出两者，他们将考虑父div的100％宽度。

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

另外，

无需在.skdslider:after和.skdslider类中提供填充。

使用jQuery提供动态高度。

对于JS

将此行添加到您的函数中：

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

Answer 2

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

只需删除reduce padding-top：.skslider属性后的50％。这导致了滑块DOM之后的巨大填充。

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

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

2 个答案: