Semantic-UI - How to set size in percentages

Question

I found semantic-ui a few days back and I must say its impressive and I am now trying to convert my app from Bootstrap 3 to semantic-ui.

Need a little help here, what I am trying to do is divide the body of the page in 2 parts. I want to have the height of the 2 divs in % ie. 85% and 15% to make it a complete 100%. But for some reason its not working.

body {
height: 100%;
width: 100%;
}
#div1 {
height: 85% !important;
border: 1px solid #000000;
}
#div2 {
height: 15% !important;
}

Am I doing something wrong? This works in bootstrap. Can someone please shed some light on it?

Thanks in advance, Praney

Answer 1

After a lot of playing around, I figured out the semantic-ui doesn't support styling on the document body.

So for the work around I had to put the two divs #div1 and #div in the #container div. I then applied the style:

#container {
height: 100vh;
}
#div1 {
height: 85% !important;
border: 1px solid #000000;
}
#div2 {
height: 15% !important;
}

So the divs were contained:

<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

and it worked. Just wanted to put it out there so if anyone else runs into the same problem they can do this.

Praney

Answer 2

Semantic IU Grid system example.

<div class="ui stackable grid">
<div class="equal height row">
    <div class="twelve wide column">

            <p>Your question was asking about vertical percentages, but here is an example of how the grid system of Semantic UI can have equal height rows so that a busy column like this one is the same height as others in the same row allowing for a div below  without overlaps. This area is three quarters wide (twelve blocks out of sixteen). It is whatever height the content is. </p> 

    </div>
    <div class="four wide column">

           <p>The small column</p>

    </div>
</div>

<div class="row">
    <div class="sixteen wide column">
        <div class="ui segment"> 
             <p> This is the footer in a box because it is wrapped in a div with a class name "ui segment". </p>
        </div>
    </div>
</div>

Remove the word 'stackable' to stop the layout being responsive. Add the word 'page' in the first list to fix the width max on large screens.

Answer 3

Your body will need to have a defined height for this to work:

body {
height: 800px;
width: 100%;
}
#div1 {
height: 85% !important;
border: 1px solid #000000;
}
#div2 {
height: 15% !important;
border: 1px solid #000000;
}

JSfiddle: http://jsfiddle.net/48Eh7/

But I'm not really sure why you would want to do this since the div element will expand to hold whatever content is inside it.

If you just want a footer at the bottom of your page, all you need to do is this:

<div>
    <p>Content content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
<div>
    <p>Footer stuff</p>
</div>

No CSS required.