Geek Answers Handbook

Download footer

I am trying to ensure that my footer is at the bottom of my website. I don't want it to stick when I scroll, just to appear below while scrolling through a web page.

Currently - A web page is displayed with a footer below the content. I added code such as bottom:0;, and found that it adheres to and does not fit my website. I also added code such as html, body { height:100%;}if you looked at other questions about the stack, but had no joy.

Any advice would be appreciated.

Code :

    .footer {
    	background: #F37A1D;
       	position : absolute;
    	width: 100%;
    	border-top: 3px solid #F37A1D;
    }
    <div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>
Run code
+4
source share
4 answers

*{
    padding: 0;
    margin: 0;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background: #F37A1D;
 border-top: 3px solid #F37A1D;   
}
<div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>
Run code
+3
source

navbar-fixed-bottom .

<footer class="navbar-fixed-bottom">
    <p>Footer content</p>
</footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">
    <h1>Twitter Bootstrap 3.0</h1>
  </div>

  <footer class="navbar-fixed-bottom">
    <p>Footer content</p>
  </footer>

</div>

Bootstrap sticky footer CSS.

+1

, , .

http://getbootstrap.com/examples/sticky-footer-navbar/

Also here is a sticky footer with a little jQuery

http://codepen.io/imohkay/pen/htpzf

.footer {
        background-color: #f5f5f5;
        bottom: 0;
        height: 60px; 
}
0
source

If you set min-heightin your div, the footer will always be shifted to the bottom, regardless of whether there is enough content to press it yourself.

0
source

More articles:


All Articles