向容器添加垂直滚动答案

【问题标题】：Add a vertical scroll to a container向容器添加垂直滚动
【发布时间】：2022-01-21 19:56:44
【问题描述】：

我无法添加垂直滚动条。溢出-y：滚动；似乎没有做任何事情，尝试了高度，但似乎也没有做太多...容器只是不断离开屏幕，因此无法选择底部项目

谢谢你:)

在我的 Index.cshtml 中

    <div class="row">
        <div id="tree"></div>
    </div>
    <div class="row">
        <div style="margin: auto; width: 95%;">
            <div class="col-xs-4">
                <button id="treeCheckAll" class="gj-button-md">Check All</button>
                <button id="treeUncheckAll" class="gj-button-md">Uncheck All</button>

                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>

<button id="selectVolumes" class="btn btn-outline-dark" onclick="selectVolumes()">Select Volumes</button>




function selectVolumes() {
    $("#Container").show(); 
    $("#Container").dialog(); 

    if (tree == null) { 
        tree = $('#tree').tree({ //Gijgo tree
        primaryKey: 'id',
        uiLibrary: 'bootstrap4',
        dataSource: Menu,
        selectionType: 'multiple',
        checkboxes: true
    });
    $('#treeCheckAll').on('click', function () {
        tree.checkAll();
    });
    $('#treeUncheckAll').on('click', function () {
        tree.uncheckAll();
    });
}

}

在 bootstrap-grid.css 中

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    overflow-y: scroll;        
}

【问题讨论】：

尝试将overflow-y: scroll写成overflow-y: scroll !important
谢谢@Rana 恐怕不走运。我可以滚动到主窗口的底部（获取南极洲以南的列表），这样就可以看到所有列表。选择卷列表中没有滚动条。
你想滚动什么？持有侧边栏的容器的overflow-y值是多少？
@Shiju Nambiar 试图让白色的 Select Volumes 容器滚动到太多的项目并通过地图的末端，这是一个容器流体。溢出-y 值是上述失败的尝试。谢谢。
@tj26 尝试容器流体的 height:auto 或者如果白色选择体积的位置属性是绝对的，添加一个相对于容器流体的位置并检查。

标签： javascript jquery css asp.net-mvc

【解决方案1】：

尝试给容器一个最大高度：

.container-fluid {
  max-height:100vh
}

【讨论】：