I have a sticky footer that sticks to the bottom, but the problem is the contents in the body and the footer overlap.
I currently have my html, body, and main set to height 100% / min-height: 100%, but and my footer is positioned absolute with left: 0 and bottom: 0. The problem with this is, I have my background image positioned at the bottom of my main and it overlaps onto the positioned absolute footer.
I also tried not having my footer positioned absolute and just have the main height 100%, and this works fine, but I have to scroll down to see the footer. Why is the footer being pushed down so much that I need to scroll down? I want the footer to be exactly at the bottom of the page without having to scroll down to see it.
<html>
<body>
<main>
<div>Contents here</div>
</main>
<footer/>
</body>
</html>
html, body, main {
height: 100%;
}
.content {
background-repeat: no-repeat;
background-position-y: 100%;
background-position-x: center;
background-size: 1000px;
}
This is sticky footer code that works. You might want to use this layout to solve your issue.
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<p><button id="add">Add Content</button></p>
<div class="push"></div>
</div>
<footer class="footer">
Footer
</footer>
Related
I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.
What I have is basically this:
<style>
footer {
position: fixed;
bottom: 5pt;
height: 100pt;
}
</style>
<div>
content...
</div>
<footer>
footer
</footer>
But when the body content is too large, it overlaps with the footer and I can't find a way around it.
I tried #page { margin-bottom: 100pt; }, but it pushes the footer up too, padding didn't work, position: running did nothing (I couldn't find whether any browser supports it).
The requisites to solve this are:
the footer needs to appear on every page on print;
the footer content can't overlap with the rest of the page;
footer {
position: fixed;
bottom: 5pt;
height: 100pt;
z-index:1000;
}
<html>
<head>
<title> Page Title </title>
</head>
<body>
<div>
content...
</div>
<footer>
footer
</footer>
</body>
</html>
Use z-index to your <footer> so that your body part won't overlap your footer.
Hope this helps.
You can use the CSS calc() function to calculate the appropriate height for the body by subtracting footer height from window height. With this approach, the two elements won't overlap, their positions can remain relative, and the height is automatically recalculated when resizing the window so your footer will always stay at the bottom.
.content {
overflow: auto;
height: calc(100vh - 50px); /* window height - footer height */
padding: 0 20px;
background-color: gray;
}
.block {
height: 100px;
margin-bottom: 20px;
background-color: white;
}
footer {
height: 50px;
width: 100%;
background-color: green;
}
<div class='content'>
<span>body</span>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
</div>
<footer>
<span>footer</span>
</footer>
I have a layout where the footer is a sibling of the header and content, but the footer is dropping below the window height rather than "sticking" correctly at the bottom.
HTML
<div class="header">Header</div>
<div class="content">
Content
<div class="push"></div>
</div>
<div class="footer">Footer</div>
CSS
html, body {
height: 100%
}
.header, .footer, .push {
height: 75px;
}
.content {
margin-bottom: -75px;
min-height: 100%;
}
I've been looking over different options for sticky footer, and none seem to cover when the header and content are sibling elements with the footer. I'm working with a legacy layout, so I don't have the option of creating a wrapper container for the header and content. How can I get the footer to stay at the bottom without dropping below the window?
Since your header and footer are static heights you can do this:
min-height: calc(100% - 75px - 75px);
I keep them separate (the 75px), so that I know one is for footer and one is for header. And its easier to change in the future if one of the static heights changes.
Also, you will probably want to remove the margin from your body to get it to fit correctly and remove the negative margin you have on the footer.
html, body {
height: 100%;
margin: 0;
}
.header, .footer, .push {
height: 75px;
}
.content {
min-height: calc(100% - 75px - 75px);
}
<div class="header">Header</div>
<div class="content">
Content
<div class="push"></div>
</div>
<div class="footer">Footer</div>
Here is a fiddle of this solution.
add footer css with a separate class
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<footer></footer>
</div>
</body>
So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.
Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.
Example on JSFiddle
Code
<style type="text/css">
html, body { height: 100%; }
#container { position: relative;
/* updated to support footer push */
min-height: 100%;
padding-bottom: 60px; /* must be the same as footer height */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#below { height: 500px; } /* or no height, or whatever */
footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>
<div id="container">
<footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>
Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.
(For history's sake, here is the original fiddle)
footer { position : absolute; bottom : 0px; }
position : fixed ( When you want to stick any html element on screen and that will not move during scrolling )
position : absolute ( When it will show, it will be on the position that you specified, but later screen size and scrolling can change it's position )
Thanks ( Sorry for weak english )
:)
you could add some padding to the bottom of your page, and then use vh measurements:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#header{
height:10vh;
}
#container {
background: red;
position:relative;
}
#body {
height: 70vh;
background: gray;
padding-bottom:20vh;
}
footer {
position: absolute;
bottom: 0;
height: 20vh;
width: 100%;
background: blue;
}
<body>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<footer>footer</footer>
</div>
</body>
I'm using a background image which should cover the hole body area. Furthermore I want a sticky footer at the bottom. Now my main problem is that the background-image stops after the 100% of the body-element (after scrolling). But the background-image should cover the hole area - I could say it should have the width of the body (not just of the content which has not the hole width and is centered) and the height of the content which may be more than 100% of the browser height.
I tried the following code:
HTML
<body>
<div id="backgroundWrapper">
<div id="wrapper">
<header>
...
</header>
<article>
...
</article>
<footer>
...
</footer>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
}
div#backgroundWrapper {
min-height: 100%;
background: url('/images/bodyBackground.jpg') no-repeat;
background-position: center;
background-size: cover;
}
div#backgroundWrapper > div#wrapper {
position: relative;
width: 1024px;
min-height: 100%;
margin: 0 auto;
}
div#wrapper > footer {
position: absolute;
width: 100%;
height: 115px;
bottom: 0;
}
Although I gave min-height: 100% to the background wrapper, the inner wrapper which also has min-height: 100% doesn't fit the height (because its positioning is relative), so the sticky footer is not at the window bottom if the content is small.
Can you help me?
Here is the JSFiddle: http://jsfiddle.net/bfd2d/
EDIT: It is possible if I move the footer after the inner wrapper so that it's a direct child of the background wrapper but it would be nice if the footer is child of the inner wrapper because I haven't to give it the wrapper with and center it again.
Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.
Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But my footer appears way below and creates a huge gap in between.
Website: Stingrayimages.ca
Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink the window, the footer doesnt stop where the content.
Also i cant get the content div to stay in the middle without messing everything up.
Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.
In the sticky footer, remember, the container wraps all body content but the footer.
If you are using the same technique as the link, you are missing position at the footer.
And still, with the example you linked, see the structure:
<style type="text/css">
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 */
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
But i would rather go with something like this:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%; /* IE6: min-height*/
min-height: 100%;
}
div#header {
}
div#content {
padding: 1em 1em 5em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
}
</style>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>