Question

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

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

Answer 1

也许尝试这样做？

ul {
   list-style-position: inside;
}

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

Answer 2

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

li

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

2 个答案: