Semantic-ui: Full Height Columns

Created on 16 Apr 2015 · 2Comments · Source: Semantic-Org/Semantic-UI

Hello,
First of all thanks for the this awesome project.
I'm using code like that, i just want to make the this two column full height.
I'm new at grid systems i don't know how its done.
My Code:

<div class="ui two column row vertically padded grid">
<div class="four wide column" style="background:red;">
    left_menu
</div>
<div class="twelve wide column" style="background: blue;">
    content
</div>

Thanks

Source

mbpakalin

Most helpful comment

Thanks @jlukic! It's elegant solution if you want to make columns _equal_ size.

If you need _full_ height column instead - you could either try stretched class or set min-height to 100%.

.ui.grid {
    min-height: 100%;
}

devsli on 25 Oct 2016

👎17 👍5

All 2 comments

in 1.x you can use equal height grid or equal height row in 2.0 it is default.

jlukic on 16 Apr 2015

👎8 🚀1