This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How do I write inside my footer and keep it at the bottom of the page?
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
}
<footer class="underbar">
</footer>
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position: fixed;
}
Add Property position:fixed;
Use position:fixed property
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position:fixed;
}
<footer class="underbar">
</footer>
You can add the position property in the css.
.underbar {
position:fixed;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
And you can put your text inside the footer tag.
<footer class="underbar">
Your text here
</footer>
i have tried, check may be this will help u
.underbar {
bottom:0;
width:100%;
height:60px;
padding:0px;
margin:0px;
background:#000000;
position:fixed;
}
<footer class="underbar">
</footer>
You can use the following:
position: fixed;
right: 0;
bottom: 0;
left: 0;
and it will work!
Below you may find a jfiddle example for your code:
https://jsfiddle.net/2wqrg2zu/
<style>
.underbar {
bottom:0;
width:100%;
height:60px;
background:#000000;
position: fixed;
}
</style>
<HTML>
<HEAD>
</HEAD>
<BODY>
<footer class="underbar">
footer
</footer>
</BODY>
</HTML>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -60px;
background:green;
}
footer{
height: 60px;
background:#000000;
color:#ffffff;
text-align:center;
}
.push {
height: 60px;
}
header{
background:gold;
}
<!DOCTYPE html>
<div class="wrapper">
<header>
<h1>Fixed Footer</h1>
</header>
<div class="push"></div>
</div>
<footer>
<h5>
Fixed Footer
</h5>
</footer>
check it
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0 none repeat scroll 0 0;
padding: 10px;
}
#body {
padding: 10px 10px 60px;
}
#footer {
background: #6cf none repeat scroll 0 0;
bottom: 0;
height: 60px;
position: absolute;
width: 100%;
}
#header p,
#header h1 {
margin: 0;
padding: 10px 0 0 10px;
}
#footer p {
margin: 0;
padding: 10px;
}
<div id="container">
<div id="header">
<!-- Header start -->
<p>« Back to the CSS article by Matthew James Taylor
</p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade
gracefully by positioning the footer under the content as per normal. Read the full article for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more website layouts and web design articles.</p>
<!-- Footer end -->
</div>
</div>
First add these scripts to your document.
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
And then add the class "footer navbar-fixed-bottom" to the footer.
Thats should work.
<footer class="footer navbar-fixed-bottom"> </footer>
Related
I am using the twitter bootstrap "sticky footer" example code.
The sticky footer works fine, but now I want to "fill" the remaining space by making the body (or a div) take up the height of html element and then apply a background color.
HTML
<body>
<p>....</p>
<footer class="footer">
<div class="container">
<p>Place sticky footer content here.</p>
</div>
</footer>
</body>
CSS
html {
position: relative;
min-height: 100%;
background-color: green;
/* background-color: transparent; */
border: 3px solid blue;
}
body {
background-color: tomato;
padding-top: 20px;
border: 3px solid black;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 60px;
background-color: #0bb;
}
Here is a working demo - http://jsbin.com/xurulofame/1/edit?html,css,output
How can I make the BODY element take up 100% height of the HTML element - and therefore fill the background with the "tomato" color?
Use this:
body {height:100vh;}
along with adding the rest of the properties for your body element
Use height:100% inside HTML instead of using min-height. Here is the result http://jsfiddle.net/z9h18xge/
Please check this code. Or link to fiddle
html{height:100%;}
body{
margin:0;
height:100%;
}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
height:1%;
background: #ccc;
height: 100px;
}
<div id="wrapper"> <!-- table -->
<div class="w1">
<p>header and content of the page</p>
</div>
<div id="footer"> <!-- table-footer-group -->
<p>footer content</p>
</div>
</div>
I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)
HTML
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>
CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}
Here is my code
http://codepen.io/anon/pen/tyvAe
Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}
I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one):
http://jsfiddle.net/g13ogq2u/2/
Basically it's for the CSS:
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}
The little JQuery code is:
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});
And the HTML would be:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>
Hope it helps ;)
You can do this with css...
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}
Depending on what you need, you may also like to play with css property: max-height in place of height.
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.
Let me show you.
How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.
What's the right way to do this?
Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius
The simplest solution that I can think of (and I don't think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.
HTML:
<div id="outer">
<div id="fixed">
Fixed.
</div>
<div id="fluid">
Fluid.
</div>
</div>
CSS:
#outer {
position: relative;
background: rgb(255, 200, 200);
padding: 10px;
height: 400px;
}
#fixed {
height: 100px;
padding: 10px;
background: rgb(200, 255, 200);
}
#fluid {
padding: 10px;
background: rgb(200, 200, 255);
position: absolute;
top: 100px;
bottom: 10px;
left: 10px;
right: 10px;
}
like this?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
left:50%;
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
head
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
footer
<!-- Footer end -->
</div>
</div>
</body>
</html>
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}