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;
}
Related
I am having great difficulty making my footer stick to the bottom of the page in my angular application. I have tried a number of different things but cant seem to figure out what i am doing wrong. I have defined the height of the container div so i know the viewport size therefore the footer should be able to identify the bottom of the viewport and stay there. However as the content grows the footer does not grow with the content.
HTML:
<body style="margin:0; padding:0; height:100%;">
<app-root></app-root>
</body>
app-root html:
<div class="container">
<app-header id="header"></app-header>
<div id="body">
<router-outlet></router-outlet>
</div>
<app-footer id="footer"></app-footer>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%;
position:relative;
}
#header {
padding-bottom:10px;
}
#body {
padding:10px;
padding-bottom:10px;
}
#footer {
position: absolute;
bottom:0;
width:100%;
height:60px;
}
Put your app-footer in separate div and add the following class:
<div class="fixed-bottom">
<app-footer></app-footer>
</div>
in style:
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
Using flexbox is probably going to offer the cleanest implementation and has good browser support.
Here is what I've done in the past, noting that the content is just there so the snippet displays as intended.
The structure below is similar to your question. You may need to break it down into components as suited for your app. Note my usage of class selectors instead of id selectors, as another answer noted there was a typo in yours for #container and .container.
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: powderblue;
}
.content {
flex: 1 0 auto;
background-color: salmon;
}
.footer {
flex-shrink: 0;
background-color: orchid;
}
<body>
<app-root>
<div class="container">
<header class="header">
<app-header>header content</app-header>
</header>
<main class="content">
<router-outlet>main content</router-outlet>
</main>
<footer class="footer">
<app-footer>footer content</app-footer>
</footer>
</div>
</app-root>
</body>
This answer is based on a snippet from Sticky Footer, Five Ways using the flexbox option. You can view alternatives in that article.
1) typo error css assign to id #container HTML use to class
2) Remove height #container
3) Add padding-bottom #body is footer height;
changes CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
/*height:100%;*/ /*Remove this*/
position:relative;
}
#header {
padding-bottom:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Add Padding footer Height*/
}
#footer {
position: absolute;
bottom:0;
width:100%;
height:60px;
}
Using flexbox this should be quite simple.
<body>
<header>...</header>
<main class="main-content">
...
...
</main>
<footer>...</footer>
</body>
Whatever is your main content container (in this example it is .main-content class, apply this flex style to force it takes max height pushing the footer to the bottom.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1 0 auto;
}
I want the body to have margins of like 15px and stay 100% height and width of the window, 100 vh is the same thing.
I want a welcome screen which will fit to the screen (resolution of the user) so basically the body should resize it self to the screen height and width when the user resizes the window.
Ok, so the problem is when I use 100% or vh with margin it overflows, i cannot work with hidden cuz i need the bottom part, now its okay with width because the its display block which fixes the problem for width.
h
https://jsfiddle.net/0dx36zb4/
Try
body {
width: 100vw;
height: 100vh;
}
You have to use box-sizing: border-box; along with width: 100vw; and height; 100vh;
Don't use margin on the body, instead use a parent/child element and set padding on the parent. Margin is outside of the element, and so is not considered in the calculation - yours overflows because it is 100% of the width/height, plus 15px in each direction. Padding is inside the element and you can set the browser to consider it in your width/height specifications with the box-sizing:border-box property.
HTML
<html>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>
CSS
body {
width:100vw;
height:100vh;
}
#parent {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100%;
height:100%;
padding:15px;
margin:0;
}
#child {
width:100%;
height:100%;
margin:0;
}
EDIT
I was also able to get your JSFiddle working so you can see an example of that if you replace your code with the code below.
html,body {
background-color: red;
height: 100%;
margin:0;
padding:15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
section {
background-color: yellow;
height: 100%;
margin: 0;
}
Use padding and box-sizing to fix the issue. I updated your JSFiddle to work:
https://jsfiddle.net/0dx36zb4/4/
html,body {
background-color: red;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body {
padding:15px;
margin: 0;
}
section {
background-color: yellow;
height: 100%;
}
h1 {
margin: 0;
padding: 0;
}
<body>
<section>
<h1>hello</h1>
</section>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0px;
border: 0;
overflow: hidden;
}
.splash {
height: 100%;
width: 100%;
z-index: 0;
}
<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg
" class="splash" />
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.
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 playing around with CSS Sticky Footer and I have an issue where...
* { margin: 0; }
Although it is designed to reset all DIV margins, this is not what I want to do. The text on every page are squished and have no margins now.
I have tried defining it on every element I want but with no success i.e...
div.wrapper, div.push, div.footer { margin: 0; }
How can I bypass it so only the necessary elements by sticky footer have a margin of 0, and the rest remain untouched?
Delete the * CSS and change the HTML one to:
html, body {
height: 100%;
margin: 0;
}
.footer * {
margin: 0;
}
I don't get it.. why use sticky footer. Try creating a css table structure like this. People underestimate CSS tables! They can be awesome in creating fluid designs..
#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; }
<div id="wrapper">
<header>
<h1>I'm a header!</h1>
</header>
<div id="main">
</div>
<footer>
<p>I'm a footer!</p>
</footer>
</div>
In this CSS example none of the other elements will be affected and both the footer and header keep their height while the mid section is fluid filling the restspace..
Also take a look at table-cell.. it allowes for horizontal structurs like a solid left side with a fluid main section.
Also to correct the text in the fotter you can edit this CSS:
font: 0.8em helvetica,arial,sans-serif;
Line 50 of the style.css
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}
Why would you use a premade sticky footer if it's been created that easily?
Try:
<footer><span>Footer Content</span></footer>
with the following CSS:
footer{
position:fixed;
bottom:0px;
height:30px;
width: 100%;
z-index: 9999;
color: #595959;
font-size: 9pt;
text-align: center;
}