Setting size using percentages in Semantic-UILet's explore how to define the size

Question

Setting size using percentages in Semantic-UILet's explore how to define the size

Since discovering semantic-ui a few days ago, I've been impressed and have decided to switch my app from Bootstrap 3 to semantic-ui.

I could use some assistance here. I'm attempting to split the body of the page into two parts. I would like the height of the two divs to be in percentages, specifically 85% and 15%, totaling 100%. However, for some reason, it's not working as expected.

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

Could someone point out what I might be doing wrong? This method worked fine in bootstrap. Any insights on this issue would be greatly appreciated!

Thank you in advance, Praney

html css twitter-bootstrap semantic-ui

Answer 1

Answer №1

Illustration of Semantic IU Grid system.

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

            <p>You inquired about vertical percentages, however, presenting an instance showcasing the equal height rows feature in Semantic UI's grid system. This ensures that a dominant column like this aligns in height with others in the same row, permitting a div below without any overlapping issues. This segment occupies three-quarters of the width (twelve blocks out of sixteen). It adjusts according to the content's height. </p> 

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

           <p>The compact column</p>

    </div>
</div>

<div class="row">
    <div class="sixteen wide column">
        <div class="ui segment"> 
             <p> This represents the boxed footer as it is enclosed within a div with the class name "ui segment".</p>
        </div>
    </div>
</div>

By eliminating the term 'stackable', the layout ceases to be responsive. Include the term 'page' in the initial list to establish a maximum width on larger screens.

Answer 2

Illustration of Semantic IU Grid system.

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

            <p>You inquired about vertical percentages, however, presenting an instance showcasing the equal height rows feature in Semantic UI's grid system. This ensures that a dominant column like this aligns in height with others in the same row, permitting a div below without any overlapping issues. This segment occupies three-quarters of the width (twelve blocks out of sixteen). It adjusts according to the content's height. </p> 

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

           <p>The compact column</p>

    </div>
</div>

<div class="row">
    <div class="sixteen wide column">
        <div class="ui segment"> 
             <p> This represents the boxed footer as it is enclosed within a div with the class name "ui segment".</p>
        </div>
    </div>
</div>

By eliminating the term 'stackable', the layout ceases to be responsive. Include the term 'page' in the initial list to establish a maximum width on larger screens.

Answer 3

Answer №2

In order for this to function properly, your body must have a specific height:

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

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

However, it may not be necessary to set fixed heights for the div elements as they will expand based on their content.

If you simply want a footer at the bottom of the page, you can achieve that with the following HTML code:

<div>
    <p>Content goes here...</p>
</div>
<div>
    <p>Footer content</p>
</div>

No need for additional CSS styling in this case.

Answer 4

In order for this to function properly, your body must have a specific height:

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

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

However, it may not be necessary to set fixed heights for the div elements as they will expand based on their content.

If you simply want a footer at the bottom of the page, you can achieve that with the following HTML code:

<div>
    <p>Content goes here...</p>
</div>
<div>
    <p>Footer content</p>
</div>

No need for additional CSS styling in this case.

Answer 5

Answer №3

After experimenting extensively, I discovered that semantic-ui does not allow for styling on the document body.

To address this issue, I had to nest #div1 and #div2 inside the #container div and apply the following styles:

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

By containing the divs as follows:

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

This solution worked effectively. I wanted to share this workaround so that others facing the same issue can benefit from it.

Sincerely, Praney

Answer 6

After experimenting extensively, I discovered that semantic-ui does not allow for styling on the document body.

To address this issue, I had to nest #div1 and #div2 inside the #container div and apply the following styles:

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

By containing the divs as follows:

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

This solution worked effectively. I wanted to share this workaround so that others facing the same issue can benefit from it.

Sincerely, Praney

Setting size using percentages in Semantic-UILet's explore how to define the size

Answer №1

Answer №2

Answer №3

Similar questions

limited growth of float variable

submitting image data from HTML5 canvas using an HTML post request

When clicking on HTML input fields, they do not receive focus

Picking and modifying a newly added HTML input element using Jquery

Making Adjustments to the Padding of Main Content Column in Typo3 Using Bootstrap Package

How can I set the text to be in the center of a VML

Addressing some minor visual inconsistencies in an HTML bullet-pointed list

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

The homepage is not converting to a different language

Damaged background in Bootstrap interface modal

Trying to decide between using a Javascript or HTML5 PDF Editor?

Only output to the console if the data returned from an AJAX request has been

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

The container is not showing the JSTree as expected

Loading HTML content in Electron using the renderer process JS

What is the best way to show checkbox selections based on my database structure?

Providing input through the URL bar in PHP and HTML

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page