我希望plnkr snippet说明我的问题。
当您运行它并单击菜单时，侧边栏将展开。 那一切都很好。我遇到的问题是当你滚动内容时，侧边栏没有设置它的高度来填充空间。 我试过改变侧边栏上的css属性，但没有任何乐趣。 我错过了一个技巧，需要一些帮助。
我仍然用语义感受我的方式，并从语义网站借用了片段。虽然我添加了大量<p>代码来生成额外内容。
由于
$(function() {
$('.ui.sidebar')
.sidebar({
context: '.bottom.attached'
})
.sidebar('attach events', '.menu .item');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>React prototype</title>
<link href="../node_modules/semantic-ui/dist/semantic.css" rel="stylesheet" />
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached pushable segment">
<div class="ui inverted labeled icon left inline vertical sidebar menu uncover">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<p>sksksksksks</p>
<!-- begin snippet: js hide: false -->
<p>sksksksksks</p>
<p>sksksksksks</p>
</div>
</div>
</div>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/semantic-ui/dist/semantic.js"></script>
<script>
$(function () {
$('.ui.sidebar')
.sidebar({ context: '.bottom.attached' })
.sidebar('attach events', '.menu .item');
})
</script>
</body>
</html>
答案 0 :(得分：0)
这是由于height:100%中来自pushable css类的<div class="ui bottom attached pushable segment">。我不确定这是一个优雅的解决方案......无论如何，作为一种解决方法，您可以设置DOM已准备好的此元素的height（我不检查是否存在任何副作用）。所以在你的脚本中添加：
$(document).ready(function(){
$('.pushable').css('height', 'auto');
})
查看修改后的fiddle here
希望它有所帮助，