无序列表高度 100% 不适合父 div 的高度答案

【问题标题】：Unordered List height 100% not fitting to height of parent div无序列表高度 100% 不适合父 div 的高度
【发布时间】：2014-01-31 16:16:40
【问题描述】：

我在 div 中有一个无序列表（使用引导面板）。 div 设置为 100% 高度，并且其中没有无序列表，根据需要填充浏览器窗口的其余部分。当我添加无序列表时，而不是无序列表填充父 div 并正确使用“overflow-y：滚动”，它会从页面中流出所有内容。

我希望无序列表捕捉到其父 div 的高度，以便我的所有内容都保留在浏览器窗口中，这样用户只需在无序列表的父 div 内滚动即可。

如何让无序列表的高度完全贴合其父 div？

<div class="panel panel-default classroomPanel">
    <div class="panel-heading">Choose Your Classroom</div>
    <div class="panel-body">
        <ul class="classroomList">
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
        </ul>
    </div>
</div>

我的 CSS 如下：

.classroomPanel {
    margin: 0 auto;
    max-width: 500px; 
}

.classroomPanel div.panel-body {
    padding: 0;
    height: 100%;
}

ul.classroomList {
   height: 100%;
   overflow-y:scroll; 
   padding: 0;
   list-style: none;
 }

【问题讨论】：

ul 是标准的内联块。如果你想给它一个特定的高度，让它成为一个块。 ul.classroomList { 显示：块； } 应该这样做
添加“显示：块”不起作用。
另一个问题是它在一个没有特定高度的 div 内。我认为它不会占用 100%，因为它不知道 100% 是什么。通过给 div.panel-body 一个例如 400px 的高度来测试它；
将 div.panel-body 的高度设置为 400px 使无序列表的高度适合该 400px。有什么办法可以让面板主体仍然适合浏览器窗口高度的 100% 并使无序列表知道那是什么？
恐怕不行。高度：100%；通常（大多数浏览器）仅在其父级具有精确高度时才有效。在这种情况下，面板主体的高度取决于面板头的高度。你仍然可以试试这个 .classroomPanel div.panel-body:after ul.classroomList { height: 100%; }

标签： html css twitter-bootstrap

【解决方案1】：

也许可以试试这个？

ul {
   list-style-position: inside;
}

请注意不同的浏览器；它可能并不适合每个人。

【讨论】：

我尝试了您的解决方案，但很遗憾没有奏效。

【解决方案2】：

当子 Div 的宽度或高度大于父 Div 时，通常会发生这种情况。您正在做的是您使用over-flow:scroll作为子Div的。lis 的总高度将超过容器的高度。
但也有可能lis 的总高度比父容器Div(面板面板-默认教室面板)。所以它从页面流出。确切的问题可以通过检查所有 Div 的元素来解决。你可以试试

<div class="panel panel-default classroomPanel" style="overflow-y:hidden">
    <div class="panel-heading">Choose Your Classroom</div>
    <div class="panel-body">
        <ul class="classroomList">
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
            <li>sample element</li>
        </ul>
    </div>
</div>

【讨论】：