CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfooter
Amir Torkashvand
Amir Torkashvand

Reputation: 121

The navbar does not stick to bottom

<div class="row">
    <nav class="navbar navbar-default footer">
      <div class="container-fluid">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button> 
        <a class="navbar-brand" href="#">
          <img src="images/Logobott.png" />
        </a></div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="foot-stylee">
              <a href="#">Apps</a>
            </li>
            <li>
              <a href="#">Gadgets</a>
            </li>
            <li>
              <a href="#">Sience</a>
            </li>
            <li>
              <a href="#">Nature</a>
            </li>
            <li>
              <a href="#">Creative</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right nav-r">
            <li>
              <a href="#">© 2016 Great Simple</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
 .footer {
   width: 100%;
  margin-top: 30px;
   margin-bottom: 0px;
   z-index: 12;
   background-color: rgb(134, 147, 158);
                           }

As you can see my footer does not stick to the bottom. I have the same exact code for other pages and it worked but for this page it does not. Can someone tell me what is wrong? I want it to be at the end of the page.

Upvotes: 2

Views: 3745

Answers (4)

Zay Lau
Zay Lau

Reputation: 1864

When you are first having a <html> that may not fill the window's height, and neither the <body> element, also the .container element... if you want to have a sticky footer, you could try 

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
}
body {
  padding-bottom: 100px;
}

Edit 1 -

There are 2 ways to not use the fixed position, the first one is using the calc function of CSS:

html, body { min-height: 100vh; } nav { min-height: 10vh; height: auto; } footer { min-height: 100px; height: 100px; } main { min-height: calc(90vh - 100px); }

The other way ia using <table>, <tr> and <td> or display: table, display: table-row and display: table-cell with min-height CSS property.

You may want to look at my answer of this question for more info: Sticky footer that extends when at website-bottom and scrolling further

Edit 2 -

I found that this could be done via the display: flex; easily.

body {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  min-height: 100vh;
}

header { height: 100px; }
content { flex-grow: 1; }
footer { height: 100px; }

Try on: https://jsfiddle.net/89ucrec5/6/

Upvotes: 2

andreas
andreas

Reputation: 16936

You can achieve that with positioning. Make the footer position: fixed; and give it bottom: 0; so it will stick to the bottom of the viewport:

.footer {
  width: 100%;
  height: 200px;
  margin-top: 30px;
  margin-bottom: 0px;
  z-index: 12;
  background-color: rgb(134, 147, 158);
  position: fixed;
  bottom: 0;
}
<div class="row">
  <nav class="navbar navbar-default footer">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
        <a class="navbar-brand" href="#">
          <img src="images/Logobott.png" />
        </a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="foot-stylee">
            <a href="#">Apps</a>
          </li>
          <li>
            <a href="#">Gadgets</a>
          </li>
          <li>
            <a href="#">Sience</a>
          </li>
          <li>
            <a href="#">Nature</a>
          </li>
          <li>
            <a href="#">Creative</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right nav-r">
          <li>
            <a href="#">© 2016 Great Simple</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Edit

If you want your footer to be on the bottom of your page rather than on the bottom of the viewport, just remove the position: fixed; give the element above the footer a min-width of 100% minus the height of the footer, e.g.:

min-height: calc(100% - 200px);

Upvotes: 3

Vitali Protosovitski
Vitali Protosovitski

Reputation: 563

html:

<div class="your-container">
   <div class="content">
   </div>
   <div class="footer">
   </div>
</div>

css:

.your-container {
    min-height: 100vh;
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

You will need to make proper padding from main content

Another way is setting flex container so your content would take all remaining space

html:

<div class="your-container">
   <div class="content">
   </div>
   <div class="footer">
   </div>
</div>

css:

.your-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
content {
   flex-grow: 1;
}

Upvotes: 1

Kyle L.
Kyle L.

Reputation: 634

I found a decent solution to this a few months ago... You have to wrap your page content and footer into separate wrappers and do a little bit of CSS magic with :after to get it right.

html:

<html>
<body>
<div class="content-wrapper">
  my content
</div>


<div class="footer-wrapper">
  my footer
</div>
</body>
</html>

css:

html, body {
  height: 100%;
}

.content-wrapper {
  min-height: 100%;
  margin-botton: -100px; //set to anything as long as it matches footer-wrapper height
}

.content-wrapper:after {
  content: "";
  display: block;
}

.footer-wrapper, .content-wrapper:after {
  height: 100px;
}

Upvotes: 1

Related Questions