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;
}
Related
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>
I would like to have a footer element that is inline only if the content is overflowing the viewport, in which case it becomes sticky, bottom fixed. The use case would be to have some functional button always visible on long data grids.
I remember doing this with a hack many years ago but I forgot :) I know it could be done with Javascript but is there a more streamlined way to do it only with CSS?
When content is shorter than the viewport
------< viewport top
header
content
[footer, inline]
------ < viewport bottom
When content overflows the viewport
------< viewport top
header
content
content
content
[footer, sticky]
------ < viewport bottom
content
content
content
How about using max-height and calc? Header and footer need to have a fixed width:
http://codepen.io/jlowcs/pen/OPBGjx
HTML:
<div class="header"></div>
<div class="content">
content<br>
[...]
content<br>
</div>
<div class="footer"></div>
CSS:
html, body {
margin: 0;
height: 100%;
}
.header {
height: 150px;
background-color: blue;
}
.footer {
height: 100px;
background-color: green;
}
.content {
max-height: calc(100% - 150px - 100px);
overflow: auto;
}
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 am having a hard time with this. This is my code:
http://jsfiddle.net/HMsKa/30/
I am trying to integrate a docked footer for when there is little amounts of content. I am using this site for the code example of how to do this:
http://ryanfait.com/sticky-footer/
http://ryanfait.com/sticky-footer/layout.css
However, no matter what connotation I put this code into my site, it doesn't work. Could someone show me how I should integrate this with my existing code?
You have to check out your the html structure, look in the sticker-footer's html for example.
It has to be somewhat as below:
HTML:
<body>
<div class="wrapper">
<!-- your content -->
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
As the css file says, I'll recreate it here:
* {
margin: 0;
}
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
A somewhat edit of your fiddle:
http://jsfiddle.net/HMsKa/36/
You need a .wrapper with a min-height: 100%.
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>