Footer Semantic UI

html css semantic-ui

10,653

Solution 1

add a warp div like below

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

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

and set 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>
      <tr>
        <td class="collapsing">3</td>
        <td>Mango</td>
        <td>Mg</td>
        <td>360</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
    </tbody>
  </table>
  <!-- end table -->
</div>
<!-- end container -->
</div>
<footer class="footer">
  Micro Tech 2015. All Rights Reserved
</footer>

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

Solution 2

Just set

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

fixed position in this case is the best way to position your footer always on the bottom.

10,653

Author by

Sing2

Updated on June 14, 2022

Comments

Sing2 almost 2 years

Hi this is my first time using semantic-ui framework & I have some problem with footer. I want to make footer to always stick in the bottom of page (not fixed).

this is the simple html of mine

<!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 was trying use this css:

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

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

but it doesn't work, it just work when the height of page is less than 100% of the monitor height, when it's height have more than 100% of monitor height the footer will float like this:

I also already change the css body with this: body { position: relative; min-height: 100%; }

but still doesn't work, anyone can help?

This is the full code, I made a long list table so you would know when you click the filter it will push the table down and the footer will mess.

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 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>
      <tr>
        <td class="collapsing">3</td>
        <td>Mango</td>
        <td>Mg</td>
        <td>360</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
      <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
            <tr>
        <td class="collapsing">4</td>
        <td>Grape</td>
        <td>Gr</td>
        <td>210</td>
        <td>0g</td>
      </tr>
    </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>

Sing2 over 8 years

!important is just my experiment because I am desperate can't make it stick to bottom, and your suggestion still doesn't work sir.. :(
Sing2 over 8 years

as I said in the post: I am not required fixed style bro. I want to the footer stick on bottom page, not in the bottom of screen/browser window
Sing2 over 8 years

so what is the solution to make it stick at bottom?
sodawillow over 8 years

Without the whole page, I cannot really understand if anything else is preventing the footer to stay at the bottom. But in my extremely simplified example it works.
Sing2 over 8 years

there I update the post with full code, try to go fullpage when running snippet then you will see my problem :(
Sing2 over 8 years

I solved it with giving the nav, main, & footer their own height in percent :D. thanks to you