I'm trying to create a website on my own for my art portfolio and I ran across http://ryanfait.com/sticky-footer/. I'm having trouble adding an extra element for it.
I have the following HTML structure:
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<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>
<img src="image.png>
</div>
</body>
And the following style.css:
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}
.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}
.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
with the layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 50px; /* .push must be the same height as .footer */}
.push {
height: -100px; /* .push must be the same height as .footer */
}
I set the image negative so that it will overlap the main content when the window is resized. Also, I would like a sticky bottom "border" right below the image. However, no matter how much I mess with the margins or heights, I cannot get rid of the negative space that the above code creates. Do you have any suggestions?
**I figured it out.
The sticky-footer tutorial makes a sticky footer that stops at the border of the main body. What I wanted was a sticky footer that was a top "layer" that will go over the main body AND have a border element on the bottom.
I should not have used the 'top:-238px'. Instead, I nested a class under footer in html and css.
<div class="footer">
<img src="Image.png" width="400" height="238" />
<div class="bottom-border">
<p>Copyright (c) 2008</p>
</div>
</div>
and
.footer img {
position: relative;
width: 400px;
margin: 0 auto;}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}
Then, per sticky-footer's instructions in the 'layout.css' comments, I kept the .wrapper, .footer, .push height's all the same.**
Bit late but I can answer it anyway :) The problem is occurring as even though your image is relatively placed above the footer it still occupies the same place in the page. You want to use position:absolute;.
Here it is working
I made the following changes:
.footer img {
position:absolute;
}
.footer p {
position: relative;
height:4em;
}
Using position:absolute; will place the element in the position of the last non-static (default) element and remove it from the 'flow of the page'. So in this case it places it at .footer and takes it out of the page so it doesn't take up any space anymore.
EDIT: Also I broke the centering by changing it to absolute as margin:0 auto; won't work on position:absolute; elements. Add these rules to fix that.
.footer img {
left:50%;
margin-left:-200px;
}
I have easiest solution for sticky footer. Please simple add height: 100% on body and html. Then wrapper display: table . For adding element you can add any content/element inside of .w1 element .
And its footer flexible too.
Here is the code
html{height:100%;}
body{
margin:0;
height:100%;
background: #ccc;
}
#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: #333;
color: #fff;
}
<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>
Related
I have a footer div on my side, which should be at the very bottom, regardless of the content.
When the page loads, the footer looks good, but when another div loads much text, the text slides under the footers, so the footer doesn't dynamically adapt to the page size:
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I know, position: fixed could solve my problem, but I want the footer to be "under" the content, not "over".
Here is the fiddle: https://jsfiddle.net/4fjts5p4/
When you just use absolute, use also these, but I prefer position: fixed. This would be perfect:
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-height: 40px;
}
Use a min-height rather than height, which doesn't hardcode the height.
Moreover, you haven't closed the footer's } CSS rule.
Try position relative.
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 40px;
}
If you use absolute it will take the footer outside the flow of the document.
See this fiddle.
You should put the footer and content both inside a div say its id is "wrapper" and its padding bottom should be same as footer height and its position should be relative. And then set the footer position to absolute with bottom 0.
So wrapper div code :
#wrapper
{
position:relative;
min-height:100%; /* in case if content is smaller than window size then footer will remain at bottom because of window this */
padding-bottom:40px;/* same as height of footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background:#0c0;
height: 40px;
line-height:40px;
}
Working Demo : https://jsfiddle.net/4fjts5p4/4/
You can make it by structuring HTML like the bellowing, consisting wrapper, content and footer.
The key (also one drawback) is to set the height of footer,
A demo:http://codepen.io/anon/pen/XXjOam
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
/* For highlighting, you may not need this */
#footer {
background:#ffab62;
border-top:1px solid #ff4b02;
color:#333;
text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}
All you need to do is set position:relative; and height:auto; . This will fix all your issues.
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: auto;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?
/*footer */
#footer .column {
float: left;
width: 25%;
}
#footer .column div {
margin: 5px;
height: 200px;
background: #eeeeee;
}
<div id="footer">
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
</div>
Note: This does NOT need to be a fixed footer
There's really two main options:
Fixed Footer - the footer always is visible at the bottom of the page
Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn't fill the window
The easier of the two is the fixed footer.
Fixed Footer
To make the footer fixed, in CSS set the footer's position to fixed position:fixed and position the footer to the bottom of the page bottom:0px. Here's a code snippet from CSS-Tricks.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Pushed Footer
A pushed footer is a bit trickier. Here's a great graphic showing why the footer doesn't stay at the bottom of the page when there isn't enough content:
Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. In order to fix this, you need to make sure that the footer gets 'pushed' down the full height of the page (minus the height of your footer).
Here's how to do it:
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;
}
Here's a more detailed tutorial on how to do it as well as the source of the code above.
And here's a working demo of the code from the same source.
Bootstrap have an example of a footer that sticks to the bottom of the page here:
https://getbootstrap.com/examples/sticky-footer/
Here is the CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Then in the HTML:
<footer class="footer">
</footer>
Fixed your footer in bottom with cool effect
Check full page design in jsfiddle Jsfiddle
<body>
<header>
<ul>
<li>Home</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
<h1>kulbhushan charaya</h1>
</footer>
</body>
and css is
body {
background: #ffffff none repeat scroll 0 0;
padding:40px 0;
}
header{
position:fixed;
top:0;
z-index:999;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid #ccc;
}
header ul li {
display: inline-block;
list-style: outside none none;
padding: 5px;
}
header ul li a {
color: #000000;
text-decoration: none;
}
footer {
bottom: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: -1;
}
footer h1 {
margin: 0;
}
.wrapper {
background: #ffffff;
padding: 0 15px;
z-index: 1;
}
if anyone is stuck with this again, this is a modern solution without hacks
HTML:
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
CSS:
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
I solved this by simply using min-height on the main container of my HTML.
So HTML:
<body>
<div class="top-nav">My Nav Bar</div>
<div class="main-container">
All my content
</div>
<div class="footer">
My footer
</div>
</body>
and then CSS
.top-nav {
height: 4rem;
}
.main-container {
min-height: calc(100vh - 4rem - 4rem);
}
.footer {
height: 4rem;
}
With SCSS you can use variables to track the top-nav and footer heights and then do something like
.main-container {
min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}
This is not a perfect solution because it won't put your footer exactly at the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.
you may need to set the html element height to 100%, otherwise your page itself will only be the necessary height for your content. I ran into this myself.
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */
#footer {position: relative;
margin-top: -150px; /* footer's height */
I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?
If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/ or http://css-tricks.com/snippets/css/sticky-footer/
The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:
<div id="wrap">
<div id="content">
/* Main body content */
</div>
</div>
<div id="footer">
/* Footer content here */
</div>
For the CSS:
html, body, #wrap {
height: 100%;
}
#wrap {
height: auto;
min-height: 100%;
}
#content {
overflow: hidden;
padding-bottom: (footer height);
}
#footer {
position: relative;
margin-top: -(footer height); /* Note the negative value */
height: (footer height);
clear:both;
}
If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footer with JavaScript. The value depends on the computed height of the #footer element itself.
Material Design Bootstrap has a great class: fixed-bottom. It is what I use.
You need to set the height of the parent after the footer automatically sets their position at the bottom.
if you can't add content or height in parent div or section of footer after this problem occurs.
Just use flex-box: By setting the body display to flex and then aligning the footer to flex end. This way the footer will always be the last component at the end.
body {
display: flex;
flex-direction: column;
}
footer {
align-self: flex-end;
}
Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below.
<html>
<head>
</head>
<body>
<div id = "wrapper">
<!--Wrapper div for the main content-->
</div>
<!--Footer container-->
<div class="footer">
</div>
</body>
</html>
--CSS--
body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;
}
#wrapper{
min-height: 100%;
}
.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}
If you want it to be at the bottom of the document:
.footer {
position: absolute;
bottom: 0;
}
If you want it to be at the bottom of the viewport:
.footer {
position: fixed;
bottom: 0;
}
If you'd like the footer div to be on the bottom of the page and span the entire width this would work:
.footer {
position: absolute;
bottom:0;
height: 150px;
width: 100%;
background-color: #232A3B;
}
HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
You can do this with simple display:table property.
Check this:
http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
*{margin:0; padding:0;}
.header{height:80px; background:salmon; position:relative; z-index:10;}
.content{background:gray; height:100%; margin-top:-80px;}
.content:before{content:''; display:block; height:80px; width:100%;}
.footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}
This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.
This can be achived in multiple ways:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
<html>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
}
.content {
background-color: blue;
position: absolute;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
.header {
height: 80px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer {
height: 80px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
}