I'm having a hard time with a simple css snippet for footer text.
The footer text must always be at the end of the page and the end of the screen whatever comes later.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
For a working example which you could pick apart I had previously done this exact same thing for a client of ours:
Pushed Down Page -
Fixed Position Page
Use the bottom property:
#footer
{
position:absolute;
bottom:2px;
}
Related
on this page, i'm trying to get the footer (the newsletter signup form) to fall to the bottom of the page.
but #container is somehow bigger than the body and it's messing everything up. any ideas?
here is an image of the issue. the blue is the end of the tag. http://i.imgur.com/1Ww3C6R.png
body#page {
background-color: white;
background-image: none;
width: 100%;
height: 100%;
container {
width: 100%;
margin: 0 auto;
margin-left: 0px;
}
The problem is that your div.container is set to height:100%; It would be okay if it started at the top of the page, but it is offset by your header. You need to do following:
First of all, use border-box to keep all paddings within your elements' dimensions.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now you need to create a wrapper for your content and put your footer right below it
<div class="wrapper">
<div id="drawer">...</div>
<div class="container">...</div>
</div>
<footer>...</footer>
And css:
.wrapper{
height: 100%;
width: 100%;
padding-bottom:50px; /* reserving bottom space for footer */ }
.container{
display: inline-block; /* don't force it to 100%, just make it flexible */
float:left; /* using float will spare you from extra white-space bug occuring in pages with elements having display:inline-block property */
clear:both;
width: 100%; }
footer {
width: 100%;
float:left;
clear: both;
height:50px;
margin-top:-50px; /*moving it into the padded bottom space of wrapper*/ }
There you go. Now your footer will stick to your bottom of the page unless your content is larger than 100% of the screens height. Then it will just go down respectively.
I have been created simple web page, using html5 and css, css3.
I have created sticky footer, Here is the code:
#footer {
position:absolute;
bottom:0;
color:#000;
width:100%;
height:60px; /* Height of the footer */
background:#fff;
}
and wrap and header styles:
#wrap
{
width:100%;
}
header
{
width:960px;
margin:0 auto;
}
from my above code, my page look like this: http://s2.postimg.org/6t4qokwxl/Untitled_1_copy.png
I need to show footer as full width, but when i remove margin:0 auto; from header, the footer shows exactly full-width and didn't show header properly.
I need to show except footer width as 960px; and footer need to as full-width.
I am struggling , can anyone help me? Thanks in advance.
It's hard to answer without knowing how your HTML is structured, but judging from the screenshot, you need to add left: 0to the footer CSS, otherwise it will have its left position at the same left edge as its nearest containing block (which looks like it is the #wrap element).
Tip: next time, include a link to a running code example with your post. :-)
You have to do as per this fiddle : http://jsfiddle.net/u9he2jjp/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
I am able to set sticky footer on web pages following instructions
http://css-tricks.com/snippets/css/sticky-footer/
It suggests min-height:100%and height not being set
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
However, in one of the page I need to set height:100% in.page-wrap to adjust height of its children. After I set height:100%, my sticky footer does not work and appears in the middle of page.
Is there a way to make sticky footer work with the height set to 100% in .page-wrap??
Remove height:100% element from container-fluid class
.container-fluid {
position: relative;
min-height: 100%;
/*height: 100%;*/ /*Remove the height and it will work fine*/
width: 100%;
border: 1px solid green;
}
DEMO HERE
.container-fluid
{
position:relative;
min-height: 100%;
width:100%;
border:1px solid green;
}
This will put the footer to the bottom of the page. This will work fine.
Working with Express, Jade, and Twitter Bootstrap - trying to use the Sticky Footer example. Everything renders - EXCEPT that the footer is not sticky. Kind of defeats the purpose. Anyone have any luck?
layout.js
!!! 5
html
head
title= title
script(src='/javascripts/jquery-1.9.1.min.js')
script(src='/javascripts/bootstrap.min.js')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.css')
body
block content
index.js
extends layout
block content
#wrap
.container
.page-header
h1 #{title}
p.lead Taco hunger can strike at any moment. With TacoQuest on your BlackBerry® 10 smartphone, you'll always know where the best tacos near you are.
p Use the sticky footer with a fixed navbar if need be, too.</p>
#push
#footer
.container
p.muted.credit Copyright 2013 #{title}
style.css
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
Try adding html to the body CSS so that its height is also 100%..
html,body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
I'm still new to Bootstrap. If I'm designing within the 960 container and want the footer to fit correctly inside and stick to the bottom, how do I code that? Everything I find only applies to running the footer/nav across the entire view.
Ive tried the github example and even my classmates aren't sure how to fix this.
Add this CSS below bootstrap.css reference:
<!-- CSS -->
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 960px;
}
.container .credit {
margin: 20px 0;
}
</style>
Then you can render the footer as follows:
<div id="footer">
<div class="container">
<p class="muted credit">Example </p>
</div>
</div>
NOTE: If you are experiencing problems try to set max-width: 680px; in .container at CSS code