这是普通的语义UI和非常轻巧的CSS。
我正在尝试将一个列表（恰好像树视图）放入一列中，并使其成为列表，以便如果其内容超过父列的高度，则列表的高度可以滚动。我预计这将通过纯CSS完成。但是，我似乎无法使其工作。我在做什么错了。
这是一个精简版本-对数十亿的div感到抱歉，但这就是语义UI列表的工作原理，我需要足够的钱才能在list元素中达到合适的高度。
将代码段运行到新窗口，然后通过向上拖动底部边缘来调整窗口的大小以使其更短。您将看到网格的底线移动以重新训练其边距，并且青色/蓝色边框也向上移动，因为其高度=父对象的100％，并且父对象的高度正在减小。当青色/蓝色边框遇到洋红色列表元素时，我们应该以某种方式获得垂直滚动条。
编辑：看来该问题与
有关<div class="ui grid celled padded">
与
组合<div class="row">
重新确认我没有生气后，所有需要做的就是在一个简单的div示例上设置样式@ overflow-y：scroll @，然后脱机返回下面的演示并切掉所有SUI位，然后重新介绍，我得出了这个结论。
因此请使用普通
重新编码<div class="ui grid" style="height: 90%;">
并删除行div似乎是前面的方法。在我的用例中，我不需要格网@celled padded @选项，因此不会造成任何伤害。
但是，在其他情况下，我不希望能够在固定高度的行中滚动超长内容吗？还是我想得太多了。是时候喝杯咖啡了。
此问题的原始演示如下：
<html>
<head>
<title>Treeview scaffolding</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="icon" href="data:;base64,iVBORwOKGO=" />
<style type='text/css'>
.contentwrapper {
height: 100vh;
}
p {
margin: 1em 0em;
}
</style>
</head>
<body class='body'>
<div class="contentwrapper">
<div class="ui grid celled padded" style="height: 100vh;">
<div class="row" style="height: 10%;">
<div id="info" class="sixteen wide column">
<p>Info</p>
</div>
</div>
<div class="stretched row" style="height: 90%">
<!-- treeview, editor and props row -->
<div id="nodes" class="four wide column">
<div class="ui top attached large label" >Treeview</div>
<div id="nodeListWrapper" class="" style="border: 1px solid cyan;">
<div id="nodeList" class="" style="background-color: magenta; overflow-Y: auto;">
<div class="ui list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Items 1 - 1 </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 3 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 1</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 2</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui list" style='display: none;'>
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="display" class="ten wide column">
<div class="ui top attached large label">Selected Info</div>
</div>
<div class="two wide column">
<div class="ui top attached large label">Another column</div>
</div>
</div>
</div>
</div>
</body>
<script src="../scripts/live.js"></script>
</html>
答案 0 :(得分：1)
立即检查
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<div class="ui top attached large label">Treeview</div>
<div id="nodeListWrapper" class="" style="border: 1px solid cyan; height: 60vh;">
<div id="nodeList" class="" style="background-color: magenta; overflow-Y: auto; height: 100%;">
<div class="ui list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Items 1 - 1 </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 3 - 1</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 1</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 4 - 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Level 2 - 2</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc </div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui list" style='display: none;'>
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
<div class="list">
<div class="item"><i class="dot circle outline icon"></i>
<div class="content">
<div class="header">Etc</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="display" class="ten wide column">
<div class="ui top attached large label">Selected Info</div>
</div>
<div class="two wide column">
<div class="ui top attached large label">Another column</div>
</div>
</div>
</div>
</div>
</body>
<script src="../scripts/live.js"></script>
</html>