Question

问题是没有达到它的孩子的高度。所以页脚与ul重叠。

我希望首先完成ul，然后加载页脚。

<ul>
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide Third Slide Third Slide Third Slide Third Slide Third Slide Third slide Third slide Third slide Third slide Third slide  </li>
</ul>
<section class="footer">some weird content</section>

JSfiddle - http://jsfiddle.net/squidraj/Kct8m/1/

Answer 1

这是因为您的li班级正在为列表项设置position:absolute;。

将其更改为position:relative;。

当你将位置设置为绝对时，它会进入页面中的另一个级别，因此它会停止干扰其他页面的元素。位置相对保持元素与其他元素处于同一水平，因此它仍然影响其他所有元素。

修改

唯一的方法是通过Javascript。从li中删除height: 100%，然后执行以下操作：

function setUlSize() {
    var h = 0;
    var ul = document.getElementById("ul1"); //Or whatever ul id
    for(var i=0; i<ul.children.length; i++) {
        if(h < ul.children[i].offsetHeight)
            h = ul.children[i].offsetHeight;
    }
    ul.style.height = h + "px";
}

window.onresize = setUlSize;
setUlSize();

http://jsfiddle.net/Kct8m/7/

Answer 2

如果我正确的话......请解释你的意思是Slide1等。也许我错了，如果有，请让我知道更新我的答案！

http://jsfiddle.net/Kct8m/5/

为李的添加课程

<li class="first">First Slide</li>
    <li class="second">Second Slide</li>
    <li class="third">Third Slide Third Slide Third Slide Third Slide Third Slide Third Slide Third slide  </li>

并将其添加到CSS

.first{
    position: relative;
    margin-top:0;
}

.second {
    position: relative;
    margin-top:10px;
}

.third {
    position: relative;
    margin-top:20px;
}

如果您希望它们滑动（选框）

http://jsfiddle.net/Kct8m/8/

注意：我使用了插件＆＃34; http://aamirafridi.com/jquery/jquery-marquee-plugin＆＃34;

<script src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>

<ul> 
    <div class="marquee"><li class="first">First Slide</li></div>
    <div class="marquee"> <li class="second">Second Slide</li></div>
    <div class="marquee"> <li class="third">Third Slide Third Slide Third Slide Third Slide Third Slide Third Slide Third slide  </li></div>
    </div>
</ul>
<section class="footer">some weird content</section>

您还需要jquery文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Javascript使用了：

$('.marquee').marquee()

添加了

和CSS（您可以根据需要自定义内容）

.marquee {
  overflow: hidden;

}

让我知道这是否适合您。

Answer 3

如果您无法成为li职位relative。然后另一个选择是：

将最小高度指定给ul

ul {
border: 1px solid red;
min-height: 30px; // this depends on your li height
height: 100%;
}

ul没有得到正确的高度

3 个答案: