This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
After researching pure CSS ways to "sticky" my footer, I am at a loss. Here is the structure of the layout on my site:
<html>
<body class="pages">
<div id="global" class="global">
<div class="pusher">
<header class="fixed"></header>
<section id="content"></section>
<div id="footerbottom"></div>
</div>
</div>
</body>
</html>
What I have tried with some success is adding
min-height: 100vh;
to the "content" section, but it's still not good enough.
Any suggestions to make the <div id="footerbottom"></div> stick to the bottom?
You could use pure CSS with: position: absolute and bottom:0px.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 150px;
}
#footerbottom {
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background-color:red;
text-align:center;
}
Here is the fiddle: http://jsfiddle.net/X2NqX/332/
Or a framework like Bootstrap makes it easy: https://getbootstrap.com/examples/sticky-footer/
This is a really common problem we all come across; I do invite you to have a look at this http://ryanfait.com/sticky-footer/
Know you will have to reformat you're whole html but till now I do think it is the best solution.
Or eventually as said before you could use Bootstrap solution which is -for my concern- not really optimised for every case but could work in yours.
Try this out. I think it's a better solution than using absolute positioning especially when making a responsive site.
<body class="pages">
<div id="global" class="global">
<header class="fixed"></header>
<section id="content"><p>
content<br>
content
</p></section>
</div><!--end global-->
<div id="footerbottom">The footer</div>
</body>
CSS:
html, body {
height: 100%;
}
#global {
min-height: 100%;
}
#content {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footerbottom, #global:after {
height: 100px;
}
#global:after {
content: "";
display: block;
}
#footerbottom {
background: red;
position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
Check out the fiddle here: https://jsfiddle.net/tpbt60ff/
Better explanation here: http://www.cssstickyfooter.com/using-sticky-footer-code.html
Related
I want to make a fixed header so I follow the steps listed in W3School, but the content becomes shorter... I don't know how to say, please see the pictures.
This is the picture that I follow the code
.header {
overflow: hidden;
width: 100%;
height: 46px;
background-color: #2f4779;
position: fixed;
top: 0;
z-index: 100;
}
<div class="header">
<div class="logo">
123
</div>
<div class="nav">
<ul>
<li>Discover and Explore</li>
</ul>
</div>
</div>
And here is the picture that I didn't write the fixed header.
Without fixed header
My plan is to make everything inside the viewport. How can I solve the problem?
Generally what I do in this situation is to add padding to the top of the body so it works for every page, and also use a css variable to keep the sizing consistant.
:root {
--headerHeight: 46px;
}
header {
height: var(--headerHeight);
background-color: #2f4779;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
body {
padding-top: var(--headerHeight);
}
section {
height: 200vh;
}
<header></header>
<section>
<h1>Test</h1>
</section>
Well, when you give an element a fixed (or absolute) position, it is removed from the normal flow, so you need to add a padding top of 46px (eaqual to header's height) to the section that follows the header.
You'd probably benefit from using CSS Grids or CSS Flexbox. grid-template-columns is a great property and it makes your life a lot easier.
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
Do give them a read :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried everything to get my fotter stick to the bottom of the page, but I keep having this blank space below it.
Here is my html structure:
<html>
<body>
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
</body>
</html>
The css:
#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}
#main {
margin:0 auto;
width:1200px;
position:relative;}
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}
Things I've tried so far:
Footer inside wrapper, wrapper with position:relative, footer with position:absolute; bottom:0px. Not working, footer appears in the middle of the main content.
Footer inside body. Same as above.
Footer outside wrapper.
Pusher
Margins and paddings for #main with same height as footer.
Pretty much everything I've researched so far.
¿Any help plesase?
Thank you in advance.
PS: Sorry for my english, I'm not a native english speaker.
SOLVED: Forgotten div inside the footer with position:relative bottom:10px that made the whole footer moove a bit upwards creating this blank space below it.
You need to set the dimensions of your body to fill the viewport html, then, your absolute positioning will work:
html{
width:100vw,
height:100vh;
margin:0;
}
Alternatively as noted in the other answer - you can set position:fixed, although this will have different behavior in terms of how the element appears in relation to your other content.
body {
height: 100vh;
width: 100vw;
margin: 0;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
background: blue;
}
<footer></footer>
What you want is "position: fixed;" and not "absolute".
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}
You code is working. I have created a jsfiddle with your code and is working fine. https://jsfiddle.net/jithinnjose/270oa889/
#wrapper {
margin: 0 auto;
width: 1350px;
background-color: #fff;
}
#main {
margin: 0 auto;
width: 1200px;
position: relative;
}
footer {
clear: both;
background-color: #484545;
height: 120px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
Try
position:fixed;
for footer or make a separate div for footer and assign the above mentioned css to that div
Try this magic with flexbox.
JSBIN
HTML
<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
CSS
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction:column;
}
.container {
overflow-y: scroll;
flex: 1;
}
header[role="banner"] {
height: 48px;
background-color: purple;
}
main[role="main"] {
background-color: deeppink;
flex: auto;
}
footer[role="contentinfo"] {
flex-basis: 48px;
background-color: gold;
}
Ok guys, I fixed it!!!
My stupidity has no limits. Sometimes you just focus on trying to fix one thing and you are not looking in the right place!!
The thing was I had a forgotten div inside the footer with position:relative. That was forcing my footer to go a bit upwards, creating this blank space below it.
Thank you so much for your time, really, much much appreciated, you had no chance to solve my problem since my forgotten div was not posted here, but you did made me think outside the box.
Cheers!
This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed 7 years ago.
I have emberjs application and I tried to create sticky footer.
My html:
<div class="main-container" id="">
<header> HEADER </header>
<div class="container">
{{outlet}}
</div>
<footer>
footer text
</footer>
</div>
The CSS:
.ember-view {
height: 100%;
}
.main-container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}
footer {
clear: both;
line-height: 40px;
width: 100%;
}
For unknown reason the footer is still not stick to the bottom.
Any idea?
Thanks a lot :)
In your css you should add the following properties to your footer
footer {
position: fixed;
bottom: 0;
}
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.
I'm having a problem with a webpage.
I'm using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.
html, body { height: 100%; }
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
and some other code. It works fine then.
The problem occurs when I create two additional divs to add drop shadows to the container div. I have:
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
...
</div>
</div>
<div>
I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I'm assuming that the 100% will mean 100% of the height of the parent element).
However, it does not work (in Firefox, it works in Chrome, I don't really care about IE), and I've tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.
EDIT: (partial code)
<html>
<head>
...
</head>
<body>
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
<div class="header">
header content
</div>
<div class="content" >
content goes here
</div>
<div class="footer">
footer content here
</div>
</div> <!-- end container div -->
</div>
</div>
</body>
</html>
And the relevant css:
html {
overflow-y: scroll;
height: 100%;
}
body {
margin: 0 0 0 0;
height:100%;
}
.left-shadow
{
width: 1084px;
background: url("images/left-shadow.png") repeat-y left;
/* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */
margin: auto;
min-height: 100%;
}
.right-shadow
{
width: inherit;
background: url("images/right-shadow.png") repeat-y right;
margin: auto;
height: 100%;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 1024px;
height: 100%;
}
EDIT 2:
So I just found out that this question belongs at doctype. So from now on, I'll ask questions in the right place. But since this is already up, I'd ask that people respond anyway without getting into where questions should be posted. Thanks.
First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.
But if that extra mark-up is the only way to do what you want to do, then try something like this:
* {
margin: 0;
padding: 0;
}
html, body, .shadow, #container {
min-height: 100%;
}
#container {
position: relative;
}
#content {
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #0a0;
}
And HTML mark-up (these shadow divs make it look terrible):
<body>
<div id="shadow-left" class="shadow">
<div id="shadow-right" class="shadow">
<div id="container">
<div id="content">
Page contents
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
</body>
I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/
All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.
Works in all common browsers!