我想扩展左侧的菜单,使顶部标题菜单之间没有填充,并扩展到页面垂直高度的 100%(基本上,菜单选项下方一直都是空白),但我不希望该装订线应用于右侧的另一列(文本)。有没有办法在语义 UI 中执行此操作?我已经搜索了文档,但没有找到满足我需求的任何内容。谢谢!
最佳答案
我一直在寻找同样的东西,但最终还是自己做了。
https://jsfiddle.net/cbaconnier/q07vvfp3/2/
<style type="text/css">
@media only screen and (min-width: 770px) {
.menu-wrapper {
position: relative;
margin-bottom: 14px; /* default semantic ui margin */
}
.vertical-menu {
height: 100%;
position: absolute;
}
}
</style>
<div class="ui basic segment">
<div class="ui stackable grid">
<div class="four wide column menu-wrapper">
<div class="ui fluid vertical menu vertical-menu">
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
</div>
</div>
<div class="twelve wide column">
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
<div class="ui basic segment">
<h1 class="ui header">title</h1>
</div>
</div>
</div>
</div>
关于javascript - 如何扩展垂直菜单以填充语义 UI 中的整个空白列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28324699/