When the user goes at the end of the page with the scrool, there he can see the footer. the footer must appear only at the end of bottom when the user go at the end. My code work when there are a lot of components in the page, so the footer does what I want. The problem is when the page has a little component the footer appears in this way:
My CSS are :
html{
min-height: 100% !important
position: relative !important
}
#footer{
background-color: #30373d
width: 100%
position: relative
height: auto
}
<div id="footer"></div>
Anyone can help m
Just add a wrapper around your content and give it a min-height:100vh; (or whatever height suits your actual layout) property like below.
If you want the footer to always appear at the bottom of the page, set it to positon:absolute;
body {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
}
footer {
min-height: 100px;
width: 100%;
background: black;
}
<div id='wrapper'>
very little content
</div>
<footer></footer>
Instead of working on the footer, work on the content. Given that your footer has a fixed dimension you can ensure the body content will always take at least the portion of the empty screen minus the footer size. For example you could specify your content min-height like this:
.content {
min-height: calc(100vh - footerDimension)
}
Related
Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))
I need simple header->content->footer page, like this
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.
What I've tried
header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.
Jsfiddle example:
https://jsfiddle.net/xwjhn7ej/
You are so close ... just need to change the value from height , what you need is to set the min-height :
.container {
min-height: 100%;
Updated Fiddle
Bonus:
To keep the content all visible you can use padding on the container = to the height of your footer and header:
.container {
min-height: 100%;
background:red;
width:1280px;
margin:0 auto;
position: relative;
/*Use box-sizing to include the values of the padding on the 100% min-height*/
box-sizing:border-box;
/*Padding for bottom and top = to the height of your elements footer-header*/
padding: 135px 0;
}
2nd Demo Fiddle
.container {
min-height: 100%;
}
.content {
padding-top: 135px; // height of the header
padding-bottom: 135px; // height of the footer
}
JSFiddle
Based on your fiddle you can could try the following:
.container {
/* height: 100%; - remove this*/
min-height: 100vh;
...
}
Then add appropriate padding to the top and bottom of the content depending on the height of your header and footer.
I have found a lot of similar questions on SOF but unfortunately they all relate to : how to make a sticky footer. I'm not trying to make my footer appear at the bottom of the page at any time (I mean : no matter where the user is in the page).
Actually what I'm trying to achieve is very simple but I couldn't find a solution. I have many pages that do not have a lot of text, so currently the footer is something like one line after the end of the text and there is a big blank at the bottom of the page. I would like that the footer be at the bottom of the page if there is only a few text of the page.
I have to put this on my footer class :
height : 100%
and then this
margin-top: 100%
And some other stuff, but it didn't make it.
Thank you !
You can use min-height property in style-sheet for a particular div in which you have place content, just before footer.
<div class="textclass">
<p>
Text or content
..........
</p>
</div>
<footer>
............
</footer>
CSS:
.text-class{
min-height:700px; /*adjust height at your end */
}
If you want your footer to always be at the bottom of the page, then you will have to specify a value for height for the 'content' section of your page. This will force your footer to always be at the bottom. Try something like this:
height: 800px
for the div that represents your content.
OR
Use Absolute positioning
Apply this to your footer.
.footer {
position:absolute;
bottom: 0px;
}
You can see this here: http://jsfiddle.net/892JK/
Just observe that its the above two properties namely position: absolute and bottom:0px that make it always 'stick' to the bottom of the page.
This is quite similar to 'sticky' header concept where the concept is, errm, looked at the opposite way i.e. the properties would be modified as these for sticky header
.stickyHeader {
position:fixed;
top: 0px;
}
Hope this helps!!!
I have used this method: http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
You will have to specify a fixed height of the main div containing the body elements and then specify the footer.it will always show after the specified height.
I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized.
On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.
Here's a JSFiddle that demonstrates the problem.
How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?
Thanks!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason.
http://cdpn.io/IJHxf
This is essentially where I got the answer from, and they explain it way better than I ever could.
http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.
Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;
I've been tweaking my sticky footer in hopes of stopping it once it hits the #body div, but so far, I've been unsuccessful. In most cases, it doesn't usually cover the content, but on this page, it often does.
I would like to keep it stuck to the bottom of the window, if possible, but the only other solution I've been able to come up with is a fixed position. Any suggestions?
Well, you can apply a fixed position/sticky footer in a number of ways. One option is using only CSS, as Twitter Bootstraps Sticky Footer example. That is probably the simplest implementation.
/* The html and body elements cannot have any padding or margin. */
html,body { height: 100%; }
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
/* Set the fixed height of the footer here */
#push,#footer{ height:100px }
#footer {}
I am not sure about your desired result, but may be what you need is just like:
#footer {
position: fixed;
bottom: 0;
left:0;
right:0;
}
According to Ryan Fait you can use the following CSS in the document layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*-4em represents the height of the footer */
}
.footer, .push {
height: 4em;
}
As well as the following HTML markup, which is actually quite simple to implement and it works in all major browsers.
<html>
<head>
<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>Website Footer Here.</p>
</div>
</body>
</html>
I've implemented it before and it works flawlessly for having a footer either stick to the bottom of the page, or at the bottom of your content, and it requires no jquery or javascript at all.
To respond to kurzweilguy's comment, the push makes it so that you can have the footer at 100% height, this would naturally extend the page to have a scroll bar, so to counter it you put a negative margin on it to bring it back up to make it fit on the bottom of the page. The footer that darcher references uses the same exact footer. It's a very nicely compiled footer!
Given a 2 pane 100% height based faux column layout, I am trying to have a sticky footer in the right column that does not float over the column's content if the browser viewport is too small to display all the content.
My current problem is that the footer will float over the content if the browser viewport is to small.
This is what I am after:
With the code below though the footer (3) will move over the content (2).
Explanation:
Sidebar - this will have to extend to 100% height of the browser viewport or the combined height of 2+3 (whichever is greater)
Content - Varying amounts of content.
Footer - fixed height footer. This is either at the bottom of the browser window or below the content from no.2 whichever is greater.
Current html:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="footer"></footer>
</div>
</div>
Current css:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0 auto;
width: 1000px;
height: 100%;
}
#sidebar {
width: 400px;
height: 100%;
float: left;
}
#content {
width: 600px;
float: left;
}
#footer {
position: absolute;
bottom: 0;
height:200px;
}
Any help or pointers to get the footer to stay below the content no matter what would be much appreciated.
You need something like this? http://jsfiddle.net/L6BLa/3/
I think this is the concept you're looking for: http://www.cssstickyfooter.com/
Applied the CSS/HTML on the site above to the Fiddle made by Nick: http://jsfiddle.net/L6BLa/2/
Note that you need to move #footer to the outside of #wrapper.
Caveat: #sidebar will only extend as far as the height of its own contents, not the combined height of #content + #footer. You can make #sidebar appear to extend the full length by giving #wrapper the sidebar background and making #sidebar's background transparent.