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>
Related
I am working on a project in which there many web pages. Basically I created three div tags for each page:
Header
Body (content)
Foother
But problem is that, I declared the size of body div tag, which contains the main part of a page like form, any description etc.
According to my screen size, which is small, So I declared and absolute/fixed min-height: 450px.
But when I run this code on other computers, which have bigger screen size, then footer is misplaced (in middle of screen). So what should I do now to always keep footer at bottom of screen, dispite the size of screen?
Use position:absolute; on the footer. By default footer is positioned relative to the html element, but if you apply position:relative; to body then the body will become reference.
To position it in the very bottom even when there is not much content, Use height:100%; on body as well as html.
By position:absolute; you will position it at the bottom of the content of html. So it will not be visible when content is very long, you'd have to scroll down to see it. But if you want it to the bottom of the screen even when the content is long then use position:fixed;
Below is a working snippet.
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
body{
position:relative;
}
footer{
position:absolute;
height:50px;
background-color:red;
bottom:0;
left:0;
width:100%;
}
<footer>footer Here</footer>
Basically you've to use position of relative but you've to keep fluid layout without worrying about height so I have created the code below and the footer always lay below the main what ever the main content contains.
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
header,
main,
footer{
position: relative;
float: left;
width: 100%;
}
header {
background: black;
min-height: 10px;
}
main {
min-height: 450px;
background: gray;
}
footer {
background: black;
min-height: 10px;
}
<header></header>
<main></main>
<footer></footer>
So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.
But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...
My css so far:
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
Footer is just a normal full width div with some centered text atm.
You can probably use position: fixed to achieve this.
.footer {
position: fixed;
bottom: 0;
}
With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
Pritesh Gupta's solution works really well for me:
I'm copy+pasting the code in case their site goes down:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
Here's the CSS:
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
I don't know if it works in old browsers but I'm not so worried about that myself.
It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...
Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.
If you need sticky footer you can make it with 2 solutions.
Solution 1:
HTML:
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS:
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
Example: https://jsfiddle.net/ta1amejn/
Solution 2 (With table properties):
HTML:
Content
Footer
CSS:
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
Example: https://jsfiddle.net/zbtaoq1b/
If you want a fixed footer use this solution:
.footer{
position: fixed;
bottom: 0;
}
You can do that easily with the display: flex.
You don't care about height body or wrapper tag.
Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).
https://codepen.io/tronghiep92/pen/dzwRrO
HTML markup
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS Solution
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
Or you can:
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.
I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html
However when I use the following, the footer is showing halfway my long page for some reason.
position: absolute; bottom:0
I have both short pages and long pages and I would like it to be at the bottom of both of them.
How can I keep the footer at the bottom on a long page as well?
Fiddle
I've created these Fiddles to show the problem and test the code.
Please post a working example with your solution.
Short page
Long page
My footer css:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
.content {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
/* --- Footer --- */
.footerbar { position: absolute;
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px; }
a.nav-footer:link,
a.nav-footer:visited { color: white !important; }
a.nav-footer:hover,
a.nav-footer:focus { color: black !important;
background-color: #E7E7E7 !important; }
I would suggest the "sticky footer" approach. See the following link:
http://css-tricks.com/snippets/css/sticky-footer/
Again, here's where flexboxes come with a clean hack: flex-grow.
First of all, let's see the code:
div#container {
/* The power of flexboxes! */
display: flex;
display: -webkit-flex;
flex-direction: column;
min-height: 100vh;
}
div#container div#content {
/* Key part: Eat the remaining space! */
flex-grow: 1;
}
div#container footer {
flex-basis: 100px;
}
/* Appearance, not important */
body {
margin: 0;
font-family: Fira Code;
}
#keyframes changeHeight {
0% {height: 30px}
10% {height: 30px}
50% {height: 400px}
60% {height: 400px}
100% {height: 30px}
}
div, footer {
color: white;
text-align: center;
}
div#content section {
background-color: blue;
animation: changeHeight 10s infinite linear;
}
footer {
background-color: indigo;
}
<div id="container">
<div id="content">
<!-- All other contents here -->
<section>Main content</section>
</div>
<footer>
Footer
<!-- Footer content -->
</footer>
</div>
If the content in #content cannot reach the footer, then flex-grow extends the element to fit the remaining space, as the #container has the minimum height of 100vh (i.e. the viewport height). Obviously, if the height of #content plus the footer exceeds the viewport height, #container will be scroll-able. This way, footer always remains at the very bottom.
The animation in the snippet, which belongs to a sample section inside #content, tries to show you the exact same thing: its height is changing between 30px and 400px (change it to a greater value if needed).
Also, for the sake of information, see the difference between flex-basis and height (or width).
Tip: In CSS3, if something does not work, take a look at flexboxes and grids. They often provide clean solutions.
Hope it helps.
Replace Height with overflow:auto; & give body a position
html,body {
position:relative; <!--Also give it a position -->
margin:0;
padding:0;
overflow:auto; <!-- HERE -->
}
Position the footer to be relative to body
/* --- Footer --- */
.footerbar {
position: relative; <!-- HERE -->
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px;
}
It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.
Short Page Edit
min-height:400px; <!-- Give this a real number like 400px
or whatever you want...dont leave it to 100% as -->
}
Now we have flex-box which is very straight forward.
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Note: we must contain only two div inside the body. One for footer and another for rest items
There is an excellent footer tutorial here.
The demo page is here.
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
.footerbar {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us.
There were always surprises that required more hacks and more patches.
here is what we have settled for:
css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
color: #6f643a;
font-family: Arial;
font-size: 11pt;
}
form {
height: 100%;
}
body:
<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" >
contents goes here
</td>
</tr>
<tr>
<td valign="top" bgcolor="gray" align="center" style="padding:20px">
<font color="#FFFF00">copyright:Puppy</font>
footer goes here
</td>
</tr>
</table>
That is all you need.
- if you are using asp.net don't ignore form height.
html,body {
margin:0;
padding:0;
height:100%;
}
.content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
.footerbar {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
If IE7
<!--[if lt IE 7]>
<style type="text/css">
.content { height:100%; }
</style>
<![endif]-->
Putting "position" as "fixed" with the "bottom: 0" solved my problems. Now it is responsive, the footer appears correctly (and remains there even with scroll) on both bigger screens (pc, laptop) and smaller ones (smartphone).
.footerbar {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 0;
width: 100vw;
min-height: 3vh;
}
position:fixed;
bottom:0;
Add this on the footer if you want to make the footer on the bottom while scrolling.
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.
AIM : I want to position footer based on many factors. It can be found here
1) I want to position the footer at the bottom of the screen if there is no content(or may be 1 or 2 lines) on my page. (footer visible without scrolling down - no scrollbars)
2) My footer has to be relatively placed below the last line of content if there is so much content in my page. So footer should adjust its position according to the content.
Note : The footer has to be consistent on different systems with different screen size/resolution... (a netbook is different from a laptop in its screen size).
Other INFO ----> There is a #footer_outer inside which the #footer lies.
#frame {
margin:0 auto;
width:962px;
margin-top:10px;
height:auto;
}
#content {
padding:5px 5px 5px 5px;
margin:0 auto;
width:890px;
height:auto;
min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
height: 130px;
position:relative; /*to put footer_outer 50px below the content*/
top: 50px;
bottom:0px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
Please help me in making changes to this CSS. Thank you very much!
<style>
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* fix negative height */
}
#footer, #push {
height: 100px; /* fix positive height */
clear: both;
background:#000;
}
</style>
<div id="wrapper">
<p>content here.</p>
<div id="push"></div>
</div>
<div id="footer">
footer
</div>
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
checkout this 5 different solutions and pick the best for you
1 to 4 can be found here
another one here
Due to the content being of variable lengths I can't see any other way than using JavaScript, especially if you want it different for different screen sizes. You'd need to first check the viewport height, then the height of #content, and do the maths to fit the footer where you want based on those numbers
Try to define your page container like this: height:100%; position:relative;
then, inside that container, place your footer div width, position:absolute; bottom: 0px;