Using Semantic-UI causes issues with the functionality of the height property set to 100%

View my CodePen here

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>

<body>
  <div class="ui secondary pointing menu" id="menu">
    <a class="active item">Home</a>
    <a class="item" href="/tests">Tests</a>
    <a class="item">About us</a>
  </div>

  <div class="pusher">
    <div class="ui vertical center aligned segment top-section" id="firstDiv">

      <div class="ui container">
        <div class="ui text container">
          <h1 class="ui header">Heading</h1>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

My recent project uses Semantic UI for styling, with a structured layout consisting of a navigation menu and a prominent heading within a div element. I wanted this div to fill 100% of the screen height, but encountered difficulties during implementation.

While searching for solutions, I stumbled upon this resource offering guidance on achieving full-screen heights in CSS layouts. Despite following the tutorial closely, I couldn't achieve the desired result. The struggle has been frustrating as I'm relatively new to web development.

htmlcsssemantic-ui

Answer №1

1.) The main container for your #top-section element is .pusher, but it currently has no set height. To fix this, you should add a height of 100% to the .pusher.

2.) Although you have defined a height of 100% for .top-section, the ID #firstDiv (which does not have a specified height) will take precedence. To ensure consistency, also add a height of 100% to #firstDiv.

Check out this link for more information on the topic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

htmltypescriptckeditorangular2-forms

Adjust the space between spans by utilizing the margin

There are two spans (although there could be many more) on this web page that I need to adjust the distance between. I tried using the margin-bottom attribute, but it doesn't seem to have any effect. The spans remain in their original positions, which ...

cssxhtmllayoutmarginhtml

The PHP index is not being identified when accessed through the post method

I am delving into the world of PHP as a beginner and still learning the ropes. I tried to replicate a small script exactly from one language to another, but encountered an issue where the index from my HTML file is not being recognized in PHP. The tutorial ...

phphtml

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Once AJAX/GET has been utilized, further execution of jq functions such as .click may not be

I'm facing an issue with AJAX/GET code. After reloading data from a PHP file using jQuery, I have another block of code that my problem lies in the fact that after reloading data from MySQL/PHP server while the page refreshes, I can't use functio ...

phpjqueryhtmlajax

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Chrome: Box-shadow not visible on images with a background present

Recently, I have noticed an issue with the box-shadow not displaying on images with a background on my website. This problem started occurring in Chrome a few months ago, despite working perfectly fine around six months ago. To pinpoint the problem, I cre ...

google-chromebackgroundimagecss

I'm having difficulty grasping how this CSS is being used

There's something strange about the way this CSS is being used, and I can't quite wrap my head around it. .tablecontainer table { ... } I'm familiar with table.tablecontainer, which indicates that the class attribute is equal to "table ...

css

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Scenario I am working on a web page where I want the background image to be fixed, covering the entire screen or window (excluding tablets and smartphones). The background image has been created using ImageShack. Everything is running smoothly so far. T ...

javascriptjqueryhtmlcssretina

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

Instructions on designing a three-column layout for six separate div elements

i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...

csshtml

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance: Here is the code snippet: * { box-sizing: border-box; } .column { float: left; width: 28%; height: 28%; padding: 5px; } /* Cle ...

htmlcss

Enhancing Next.js Images with Custom CSS Styles

I am working with a Next.js component: import styles from '../styles/Navbar.module.css' import Image from 'next/image' export const Navbar = () => { <div> <Image className={styles["navbar-home-icon"]} ...

javascripthtmlreactjsnext.js

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

javascriptjqueryhtmlcsspreloader

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

Updating HTML content dynamically using Node.js without requiring a page refresh

Currently, I am in the process of learning nodejs and I am looking to dynamically change the content within my HTML without having to completely re-render the entire page every time I make a post. Below is the snippet of code I am currently working with: ...

htmlnode.jsexpress

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

Currently, I have set up a table where the data can be edited by clicking on a hyperlink and then saving the changes with a button. The issue I am facing is that when I click on the edit link, all rows become editable instead of just the specific row I cli ...

htmlangulartypescriptangular2-templateangular12

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

javascriptcssreactjschartsapexcharts