Semantic UI grid column height

Question

I am building a simple grid based layout where I want to place .vertical pointing menu inside the 3th purple row, as show fiddle. Which would be the right way to make the height of the 3th row occupy the 100% of the viewport? I tried by setting the body and pointing menu heights to 100%, but that didn't work. The height of that row is determined by the height of the content, in this case the menu's height.

Answer 1

The following code snippet (and jsfiddle) is taken from the Semantic-UI Issues page, where the same question was asked by the same user:

<style>
    html, body {
        height: 100%;
    }

    .ui.grid {
        height: 100%;
    }
</style>

<div class="ui padded equal height grid">
  <div class="two wide purple column">
  </div>
  <div class="fourteen wide stretched column">
    <div class="ui equal height grid">
      <div class="sixteen wide red column"></div>
      <div class="eight wide orange column"></div>
      <div class="eight wide blue column"></div>
    </div>
  </div>
</div>

http://jsfiddle.net/ea04tkwo/