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

The stature of Bootstrap's columns

Do colors appear differently on various screens?

Utilizing either Maps or Objects in Typescript

Determine if the given text matches the name of the individual associated with a specific identification number

What could be causing the issue with my code where the canvas is not showing boxes beyond a y-coordinate of 8 along the x-axis?

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

Tips for customizing scroll bar padding and margin using CSS classes or IDs

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

How can we avoid re-rendering the same component repeatedly when using React Router v6?

The parent div will not accommodate two nested divs

Position a div to float in the top right corner without overlapping its sibling header

Stopping the page from scrolling back to the top when an asynchronous update occurs in Angular

Aligning HTML form elements side by side

AngularJS bidirectional binding with numerous select choices

What is the significance of the source element in Vue3's audio element?

Is there a way I can modify the display setting to show 4 slides per view?

What is the method for styling the third list item in a CSS hierarchy?

Guide on extracting JSON data from specific nodes using d3.js

Ways to track the visit data for different languages in Google Analytics when the language is not included in the URL