如何在Semantic UI中将垂直菜单扩展以填满整个空白列？

Question

我想扩展左侧菜单，使顶部标题菜单与页面的垂直高度延伸到100%之间没有填充（基本上就是在菜单选项下面一直有空白白色区域），但我不希望这个间隙应用于右侧的其他列（文本）。 在Semantic UI中有没有办法做到这一点？ 我已经搜索了文档，但没有找到适合我的需求的内容。 谢谢！

图片如下：

- orpheus

---

展示相关的HTML和CSS代码。 - Sleek Geek

我添加了Jade并将标签从HTML更改为Jade，希望这样可以。 - orpheus

你看过这个了吗？http://semantic-ui.com/collections/menu.html#fitted我猜这正是你所需要的。 - Francesco

@FrancescoE。这将更改菜单项本身的填充，但不会在菜单和顶部标题栏之间产生影响。它也无法解决100％垂直高度的问题。 - orpheus

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>

- Clément Baconnier

---

高度随第二个 div 的内容减少。我不确定这是否是正确的解决方案。 - hadaytullah

@hadaytullah 在我回答的时候，这个解决方案对我的需求是有效的。如果不是你的话，在.menu-wrapper类中，你仍然可以添加height: 100vh;，以便拥有一个占据整个屏幕高度的菜单。 - Clément Baconnier