ghost1349
Reputation: 83
Footer Not Sticking To The Bottom Of The Page
My footer is not sticking to the bottom of the page. I have already tried the following:
footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
None of these solutions (found on stackoverflow) have worked out for me so far so I have made a codepen with what I have:
http://codepen.io/sredmond/pen/revjdv
If you expand the code pen so that you see more of the result than the code you will see that it stays
NAVBAR
JUMBOTRON
CONTENT
FOOTER
<!--
Random white space
-->
What I want it to do is go like this:
NAVBAR
JUMBOTRON
CONTENT
FOOTER
Thanks!
Upvotes: 1
Views: 1601
Answers (3)
Przemysław Melnarowicz
Reputation: 1057
Put your .row in div inside footer, maybe row class override your position setting.
Not:
<footer class="row"></footer>
But:
<footer><div class="row"></div></footer>
And then:
footer {
position: fixed;
left: 0; bottom: 0; right: 0;
}
EDIT
So you need flexbox (or tables, flexbox is simplier but less backward compatible):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Project</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Portfolio">Portfolio</a></li>
<li><a href="/Home/Contact">Contact</a></li>
<li><a href="/Home/Terms">Terms Of Service</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="content-wrapper">
<div class="content-body">
<div class="jumbotron">
<h1 class="text-center">Portfolio</h1>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">PeppNation</h4>
<a href="http://www.peppnation.techuhost.com" target="_blank">
<img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Brock Report - Publications Page</h4>
<a href="http://brockreport.com/publications.aspx" target="_blank">
<img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Camp BASIC</h4>
<a href="http://campbasicdev.dev2.nsrit.com/" target="_blank">
<img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/>
</a>
</div>
</div>
</div>
<footer class="content-footer">
<div class="row text-center">
<div class="col-xs-12 col-md-2">
<h4 class="bold">TechU</h4>
<p><a href="/Home/Terms">Terms Of Service</a></p>
<p>© 2016 - TechU</p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Contact Information</h4>
<p>Phone: <strong><a href="tel:4142555423">(414) 255-5423</a></strong></p>
<p>Email: <strong><a href="mailto:[email protected]">[email protected]</a></strong></p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Business Hours</h4>
<p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p>
<p>Saturday & Sunday: <strong>Closed</strong></p>
</div>
<div class="col-xs-12 col-md-4">
<ul class="nav navbar-nav hidden-xs footer-social-button-align">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md hidden-lg hidden-sm">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</body>
&CSS
html, body {
height: 100%;
padding-top: 0;
background-color: #cccccc;
}
.body-content {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
height: 100%
}
.content-body {
flex: 1 0 auto;
overflow-y: auto;
overflow-x: hidden;
padding-top: 50px;
}
.content-footer {
flex: 0 0 auto;
}
Upvotes: 1
Ahmed Alaa
Reputation: 124
I tried this many times and it works perfect for me.
https://css-tricks.com/snippets/css/sticky-footer/
Hope it helps :)
Upvotes: 1
chickahoona
Reputation: 2034
The problem is, that your html and your body tag dont expand to the bottom of the screen, if you have no content. To make your html expand to the bottom add this css:
html,
body {
margin:0; /* removes any margin (especially at the bottom) */
padding:0; /* removes any padding (especially at the bottom) */
height:100%; /* will make it expand to the end */
}
Upvotes: 0
Related Questions
- How do I disable the resizable property of a textarea?
- Retrieve the position (X,Y) of an HTML element
- How to make a div 100% height of the browser window
- Get the size of the screen, current web page and browser window
- How can I make a div not larger than its contents?
- Make a div fill the height of the remaining screen space
- How do I modify the URL without reloading the page?
- How do I reduce the opacity of an element's background using CSS?
- What's the difference between SCSS and Sass?
- How to align content of a div to the bottom