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

Question

I want to extend the menu on the left to have no padding between the top title menu and to extend to 100% of the vertical height of the page (basically so there is just blank white all the way down under the menu options), but I do not want that gutter to apply to the other column on the right (the text). Is there a way to do this in Semantic UI? I've searched the documentation but I don't find anything to accommodate my needs. Thanks!

Answer 1

I was looking for the same, but ended up by doing it myself.

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>