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

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

我希望无序列表捕捉到其父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>

也许试着这样做

ul {
   list-style-position: inside;
}

---

只是要注意不同的浏览器；它可能不适用于每个分区。

当子分区的宽度或高度大于父分区时，通常会发生这种情况。您所做的是对子分区使用

溢出：滚动
。li
的总高度将大于容器的高度。
但也可能
li
s总高度大于父容器Div（面板面板默认classroomPanel）。因此，它从页面上消失了。精确的问题可以通过检查所有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>


选择你的教室

样本元素
样本元素
样本元素
样本元素
样本元素
样本元素

ul是标准的内联块。如果你想给它一个特定的高度，把它做成一个方块。ul.classroomList{display:block；}应该这样做添加“display:block”不起作用。另一个问题是它在一个没有特定高度的div中。我不认为它需要100%，因为它不知道100%是什么。通过给div.panel-body一个高度（例如400px）进行测试；将div.panel-body高度设置为400px使无序列表的高度适合该400px。有没有办法使面板主体仍然适合浏览器窗口的100%高度，并使无序列表知道这是什么？恐怕没有。身高：100%；通常（大多数浏览器）只有在其父级具有精确高度时才起作用。在这种情况下，面板主体的高度取决于面板标题的高度。你仍然可以试试这个。classroomPanel div.panel-body:after ul.classroomList{height:100%；}我尝试了你的解决方案，但不幸的是没有成功。
<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>