Semantic UI Footer allows you to easily create a stylish

Greetings! I'm new to the semantic-ui framework and I'm encountering an issue with the footer. My goal is to have the footer always stay at the bottom of the page without being fixed.

Here's a snippet of my simple HTML code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <nav class="ui borderless menu">
    </nav>

    <div class="desc">
    </div>

    <div class="ui container">
    </div>

    <div class="ui container">
    </div>

    <footer class="footer">
    </footer>
</body>
</html>

I've attempted using the following CSS:

body {
    position: relative;
    height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

Unfortunately, it doesn't seem to work as expected. The footer only stays at the bottom when the page's height is less than 100% of the monitor's height. When the height exceeds 100%, the footer floats. You can see what I mean in this image: https://i.sstatic.net/RqJD2.png.

I even tried modifying the body CSS like this:

body {
    position: relative;
    min-height: 100%;
}

However, the issue persists. Can anyone provide some assistance?

To give you a better understanding, here is the complete code. I included a lengthy table so you can see that when you click the filter, it pushes the table down and messes up the footer alignment.

body {
  height: 100%;
  color: #696F84;
  position: relative;
}
.menu {
  border-radius: 0 !important;
}
.item {
  color: #696F84 !important;
}
.logo {
  margin-right: 7px !important;
}
.company {
  font-family: 'Righteous', cursive;
  font-weight: normal;
  font-size: 27px;
  color: #515151;
  padding-bottom: 2px;
}
.desc {
  position: relative;
  background-color: #EEEEEE;
  margin-top: -1rem;
  padding: 30px 0;
  font-family: Raleway;
  font-size: 24px;
  color: #757575;
}
#filter {
  width: 100%;
  margin: 20px 0;
}
.footer {
  background-color: #212121;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
}
<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>

<nav class="ui borderless menu">
  <div class="header item">
    <img class="logo" src="./img/logo.jpg" alt="logo">
    <div class="company">Company Name</div>
  </div>
  <!-- end left menu -->

</nav>
<!-- end navbar -->

<div>
  <div class="ui container">
    <p>"Description here | Lorem Ipsum... (This text has been truncated)

htmlcsssemantic-ui

Answer №1

insert a warp div as shown below

<div class="main">
  .......
</div>

<div class="footer">
 ......
 </div>

then apply the following css

.main{min-height:100%; 
      padding-bottom:60px; 
      box-sizing:border-box;}
.footer {
  background-color: #212121;
  position: absolute;
  /* bottom: 0;  remove this */
  margin-top: -50px; /* add this */
  left: 0;
  width: 100%;
  padding: 15px 0;
}


body {
  height: 100%;
  color: #696F84;
  position: relative;
}
.menu {
  border-radius: 0 !important;
}
.item {
  color: #696F84 !important;
}
.logo {
  margin-right: 7px !important;
}
.company {
  font-family: 'Righteous', cursive;
  font-weight: normal;
  font-size: 27px;
  color: #515151;
  padding-bottom: 2px;
}
.desc {
  position: relative;
  background-color: #EEEEEE;
  margin-top: -1rem;
  padding: 30px 0;
  font-family: Raleway;
  font-size: 24px;
  color: #757575;
}
#filter {
  width: 100%;
  margin: 20px 0;
}
.main{min-height:100%; padding-bottom:60px; box-sizing:border-box;}
.footer {
  background-color: #212121;
  position: absolute;
  /* bottom: 0;  remove this */
  margin-top: -50px; /* add this */
  left: 0;
  width: 100%;
  padding: 15px 0;
}
<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<div class="main">
<nav class="ui borderless menu">
  <div class="header item">
    <img class="logo" src="./img/logo.jpg" alt="logo">
    <div class="company">Company Name</div>
  </div>
  <!-- end left menu -->

</nav>
<!-- end navbar -->

<div>
  <div class="ui container">
    <p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
  </div>
</div>
<!-- end description -->

<div class="ui container">
  <div class="ui styled accordion" id="filter">
    <div class="title">
      <i class="dropdown icon"></i>
      Filter
    </div>
    <div class="content">
      <div class="ui grid">
        <div class="four wide column" id="radio">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="small">
                  <label>Small</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="medium">
                  <label>Medium</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="large">
                  <label>Large</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="size" value="x-large">
                  <label>X-Large</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end radio -->
        <div class="four wide column" id="checkbox">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="small">
                  <label>Red</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="medium">
                  <label>Orange</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="large">
                  <label>Green</label>
                </div>
              </div>
              <div class="field">
                <div class="ui checkbox">
                  <input type="checkbox" name="x-large">
                  <label>Blue</label>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end checkbox -->
        <div class="eight wide column" id="input">
          <div class="ui form">
            <div class="grouped fields">
              <div class="field">
                <div class="ui labeled input">
                  <div class="ui label">
                    Name
                  </div>
                  <input type="text" placeholder="your name">
                </div>
              </div>
              <div class="field">
                <div class="ui selection dropdown">
                  <input type="hidden" name="gender">
                  <i class="dropdown icon"></i>
                  <div class="default text">Gender</div>
                  <div class="menu">
                    <div class="item" data-value="1">Male</div>
                    <div class="item" data-value="0">Female</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- end grouped fields -->
          </div>
          <!-- end form -->
        </div>
        <!-- end input -->
      </div>
      <!-- end grid -->
    </div>
    <!-- end content -->
  </div>
  <!-- end accordion -->

  <table class="ui blue celled striped compact table">
    <thead>
      <tr>
        <th class="collapsing">No</th>
        <th>Food</th>
        <th>Code</th>
        <th>Calories</th>
        <th>Protein</th>
        <th class="center aligned collapsing">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="collapsing">1</td>
        <td>Apples</td>
        <td>Ap</td>
        <td>200</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">2</td>
        <td>Orange</td>
        <td>Or</td>
        <td>310</td>
        <td>0g</td>
      </tr>
	     <!-- more table rows -->
    </tbody>
  </table>
  <!-- end table -->
</div>
<!-- end container -->
<footer class="footer">
  Micro Tech 2015. All Rights Reserved
</footer>

<script type="text/javascript">
  $(document).ready(function() {
    $('.ui.accordion').accordion();
  })
</script>

Answer №2

Simply define

.footer{
 position:fixed;
 bottom:0;
}

Utilizing a fixed position is optimal for consistently keeping your footer at the bottom of the page.

Answer №3

OP mentioned a preference for no fixed footer

This is the root cause of your problem:

body, html {
    height: 100%;
}

The issue arises from setting the height which affects the footer placement (this style property originates from semantic.min.css).

To resolve this, include the following at the beginning of your CSS file (!important is necessary to override values set by other stylesheets, but it should be used sparingly):

body, html {
  height: auto!important;
}


body {
  font-size: 40px;
  position: relative;
}

.footer {
  background-color: black;
  color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
<nav class="ui borderless menu">
</nav>

<div class="desc">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="ui container">
</div>

<div class="ui container">
</div>

<footer class="footer">
  some footer at the bottom
</footer>

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

What are the advantages of using clearfix for clearing floats in CSS?

Recently, I encountered an issue with using clearfix to clear the floating effect in CSS. Someone mentioned that it may not be the best technique and suggested using alternative methods. Is this information accurate? If so, what are some other options tha ...

csslayoutcss-floatclearfix

Guiding user to their destination after signing in

Having trouble showing different headers based on user login status? Users can log in using login.php, but you're struggling to display header.php when a user is not logged in or logged in. You want the page to show profile form content when they are ...

phphtmlmysqldatabasesession

Maintain the aspect ratio of an image when placing it in a square container

Looking for a way to create a CSS grid with non-square random sized images? I need help filling all the space inside a fixed size div. Any suggestions? Check out my example: (blue represents the fixed size div and red shows the image inside it) ...

javascriptjqueryhtmlcss

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

javascriptjqueryhtmlajaxautocomplete

What is the best way to automatically convert the 'echo' function of PHP from HTML code?

I am looking for an easy way to convert PHP 'echo' code from HTML. For instance, similar to this tool: This particular tool converts JS printing code from HTML. In summary, I wish to see the following conversion: from <div id="foo"> ...

phphtmlecho

Is there a way to stop text from wrapping between words and punctuation marks using CSS or jQuery?

There is a paragraph containing some text. One issue I am facing is that punctuation at the end of a word may get wrapped to the next line, as shown here: This is the sentence, This is a new line Is there a way to fix this using CSS or jQuery? ...

javascriptjqueryhtmlcsswordpress

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

Issue with compiling Tailwindcss in nextjs JIT mode

Our current project involves using tailwindcss and things were going smoothly until the clients requested a "pixel perfect" design. This meant that every element needed to be set in pixels instead of rem units. Instead of adding countless classes like h-1p ...

cssreactjscompilationnext.jstailwind-css

The IE condition is failing to work properly with .js and .css files

I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...

htmlcssinternet-explorer

How to temporarily change CSS color for 5 seconds using JavaScript and incorporate an easing effect?

Regarding this query: JavaScript - Modifying CSS color for 5 seconds Here is a live example of the solution: http://jsfiddle.net/maniator/dG2ks/ I am interested in adding an easing effect to the transition, gradually making the color fully opaque and t ...

javascriptcssjquery-easing

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

javascripthtmlnode.jsserver

Floating and scrolling navigation bar not functioning properly in bootstrap framework

I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I n ...

jqueryhtmlcss

"Preload the search query from the table, link it, and then send it to Ajax for

Currently, I have a dynamically generated table using ajax and a json file. The table consists of three segments: name, ID, and a link for more detailed information on each result. Here is an example of how the table looks: PATO:0001243 light blue ...

htmlajaxjsonhyperlink

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

javascriptjquerycss

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

phpjqueryhtmlcss

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

htmlcssresponsive-designgridmedia-queries

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

javascriptphpjqueryhtmlstyles

Using html as a template parameter in django

When passing HTML to my template, I am using the following code: passDict["problemText"] = <p> Some html</p> return render(response,'main/base.html',passDict). However, when trying to display {{problemText}} in my HTML file, I only se ...

htmldjangotemplates