Html ul没有得到正确的高度

问题是孩子们的身高不够。所以页脚与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--

发生这种情况是因为您的

li

类正在设置

位置：绝对添加到列表项

将其更改为
位置：相对

当您将“位置”设置为“绝对”时，它将进入页面中的另一个级别，因此它将停止干扰其他页面的元素。“相对位置”（Position relative）将元素保持在与其他元素相同的级别上，因此它仍会影响其他所有元素

编辑

唯一的方法是通过Javascript。从li中移除高度：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();

函数setUlSize（）{
var h=0；
var ul=document.getElementById（“ul1”）；//或任何ul id
对于（var i=0；i如果您不能使
li
位置
相对
。那么另一个选项是：

将最小高度指定给
ul

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

如果我是对的，那么请解释你所说的幻灯片1等的意思。也许我错了，如果是，请让我知道更新我的答案


给李老师增加了课程

<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
（您可以根据需要自定义内容）

让我知道这对你是否有效。
试试这个？将最小高度添加到ul，以避免重叠。我如何知道实际最小高度抱歉，我不能将其保持为相对高度。它需要是绝对高度。我正在制作一个从左到右和从右到左的滑块，因此我将li保持为绝对高度。请参见eddited答案。你不能有
假设ion:absolute
元素影响另一个元素。我理解，但问题是这将是一个滑块，我需要将li定位为绝对。在这种情况下，您可以将最小高度添加到ul。演示：听起来是一个更好的解决方案/答案。谢谢，伙计。我将实现它。它不能是固定高度。是否需要通过jquery计算最小高度？幻灯片1幻灯片2和幻灯片3将在一条直线上。幻灯片1将左-100%幻灯片2居中，幻灯片3将右-100%居中。这将是一个水平滑块。哦，好的，我不知道：/无需担心。谢谢你的帮助。
.first{
    position: relative;
    margin-top:0;
}

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

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

<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>

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

$('.marquee').marquee()

.marquee {
  overflow: hidden;

}