如何扩展垂直菜单以填充 Semantic UI 中的整个空白列？

Question

我想扩展左侧的菜单，使顶部标题菜单之间没有填充，并扩展到页面垂直高度的 100%（基本上，在菜单选项），但我不希望该装订线应用于右侧的另一列（文本）。有没有办法在语义 UI 中做到这一点？我已经搜索了文档，但没有找到满足我需求的任何内容。谢谢！

Answer 1

我一直在寻找相同的东西，但最终还是自己做了。

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>

如何扩展垂直菜单以填充 Semantic UI 中的整个空白列？

How can I extend a vertical menu to fill up an entire blank column in Semantic UI?

javascript

css

responsive-design

semantic-ui

pug