title: Full page grid on Semantic-UI
body: <p>I'm using the Semantic-UI library and I'm having a little problem.</p>
  
  <p>I created the following <a href="https://jsfiddle.net/4tsj8dsh/6/" rel="nofollow noreferrer">fiddle</a> with the HTML and CSS I currently have. However, the problem I'm trying to solve is not visible in the fiddle due to the height limitations of the result. </p>
  
  <p>The image below demonstrates my problem. What I'm trying to achieve is to make the grid to take the whole space between the header and the footer. I have already used <code>height: 100%</code> but that creates a wide space between all my elements in the content.
  <a href="https://i.stack.imgur.com/3SLT4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3SLT4.png" alt="screenshot"></a></p>
  
  <p>Any help will be gladly appreciated.</p>