I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.
Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-footer/
Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html
Implementation with no content: http://www.weleasewodewick.com/redesign/index.html
with content -> Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.
I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)
Clarification: Footer should be attached to bottom of the viewport if there is not enough content to fill the page. It should move down beyond the bottom of the viewport if there is sufficient amount of content.
Thanks!
Foxed
I think this is probably what you are looking for:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
Sorry if I didn't interpret the question correctly, but are you talking about placing the footer on the bottom of the page?
Try this:
#footer {
width: 100%;
height: 150px;
position: fixed;
bottom: 0px;
left: 0px;
}
If you want the footer to stay in one place, change the position attribute to absolute.
This may help the next person implementing the accepted answer (from fortysevenmedia.com) while using Next.js.
You will want to change
html, body {
height: 100%;
}
to
html, body, #__next {
height: 100%;
}
(#__next is the container div that Next puts just inside <body>, which therefore wraps both the container div and footer div that the accepted answer recommends - unless you give it height, the answer won't work).
Related
I can't seem to get the footer on my page to stay at the bottom and have it continually pushed down when ever I want to add more content. Now I know that this question has been asked about a million times, and I have read through many tutorials and watched several videos on the subject.
However, I just can't seem to make it work. I don't know what I'm doing wrong. The footer appears to only stay in one place. I know that to someone here, you're going to find an obvious mistake that is easily fixed. However, I'm not a professional web designer by any means. In fact, this is not my job at all. But I always like to learn how to do things, and my site looks amazing (At least to me). I just can't, for the life of me, figure out what's wrong with this one problem.
Should I start by pasting the entire coding for my page?
Check out this fiddle, hopefully I didn't misunderstand your question. The JS in there can be ignored, only the CSS and HTML are relevant.
I've seen a lot of people asking this question, and I had it too at one point, so I figured I'd post a comprehensive answer here :) Anyway, explanation:
The HTML:
<div class="wrapper">
<button id="add-content">Add more content</button>
<ul class="content">
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
</ul>
<footer>
Footer!
</footer>
</div>
And the CSS:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
position: relative;
box-sizing: border-box;
padding-bottom: 100px;
}
footer {
height: 100px;
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
bottom: 0;
}
So, the content & footer have a wrapper around them, because that's how most people roll, but it's not required and you can actually do this using just the body as the wrapper.
Now, key points to note:
html, body has a height: 100%: The height of a block element is, by default, determined by it's content. So, even if you try to position the footer at the bottom, using position: absolute; bottom: 0, it's actually getting pushed to the bottom of the first non-static parent element, or if there are no non-static parent elements, the bottom of the html/body element. By setting height: 100%, we can force the body, html elements to take up the entire available viewport and ignore content height. (You can also use min-height: 100%;, but it depends on which browsers you want to support)
.wrapper has a min-height: 100%: Between the sticky element and the element you want to sticky the footer to, you want to make sure all elements have 100% height, otherwise they'll collapse to match the height of the content.
.wrapper has box-sizing: border-box; padding-bottom: 100px;: The padding at the bottom is to make sure that if content gets added to the wrapper, it doesn't end up getting lost behind the sticky footer. This padding should match the footer height, or be greater.
footer has position: absolute; bottom: 0;: No explanation needed here, I'm guessing. The next point is actually more important.
.wrapper has position: relative: Remember what I said about non-static parents? By making .wrapper non-static, we make sure that footer stays inside .wrapper, while remaining sticky.
I think that covers it, but I'd recommend playing around with the relevant HTML/CSS in the fiddle to get a clear understanding of what's going on and how the elements interact.
P.S.: While going through your fiddle, I noticed there's a .wrapper class, but no element? I'd recommend adding that to the fiddle(and removing footer content), it'll be easier to track down what's missing :)
P.P.S.: Check out this fiddle branched from yours, I've made the following modifications after removing all unnecessary HTML content:
Added .wrapper element around all the body content, except the footer.
Added .push element at the bottom of the .wrapper element
Removed a bunch of unnecessary CSS styles from the footer, changed positioning to relative.
I would start with:
.myStyle{
position:absolute;
bottom:0;
}
If you want the footer to always be visible on the page (even when you scroll) you need to use: position:fixed;
Haa the famous sticky footer problem. I think we all once passed by their.
If you do as it says there > http://ryanfait.com/sticky-footer/ You'll manage to do one proper.
The other solution is to have a position:fixed; bottom:0px; see this fiddle but this will mean your footer will be always display over content. It will be position relatively to your window and not to your page.
I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
I want to try to make a html page fit my screen while zooming.
I can not specify this more or I do not know how to explain so:
Open this site http://www.airsoftgent.be/ and try zooming out, then you will see what I mean.
Help me please!!
Thank You
Situation:
I see what you want to do. Some months ago I tried to make the same thing, with succes.
You must understand I can not give you the whole code just some basic lines. Then try to implement them yourself and if there is a problem just ask.
Solution:
I'm going to try to explain based on my own site.
What does my site contain:
First off all I have a normal HTML page with a header, main and footer. The header is not important for now.
Let's start by adding a wrap, place it round the main and footer. Like this:
<div id="wrap">
<div id="main">
<p>Some Text Here</p>
</div>
<div id="footer">Copyright</div>
</div>
Now for the CSS file:
We start bij adding the body and html tag:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
The body and html tag must contain these items! It will not work if it doesn't!
Then we add the wrap(in CSS), make shure it contains following code, you can mess with the padding, margin and width to make it look nicer but just for now only this:
#wrap{
height: auto;
min-height: 100%;
height: 100%;
position: relative;
}
Explenation:
The min-height is to make shure the height is always 100%, even is there is not much text.
The position has to be relative! For all the rest of the tags/classes inside the wrap the position has to be absolute! But I will explain that later on.
For the Height: auto we need an other explenation: since IE does not always recognizes height: 100%, you have to use auto.
Now last but not least: we have to add the main and footer in the CSS file:
#main{
height: 100%;
position: absolute;
bottom: 15px;
}
#footer{
position: absolute;
bottom: 0;
}
Explenation:
In the main you need to set the height to 100%, just to make shure it fills the whole wrap. And as I said set the positon to absolute, this has to be done just to make shure that everything stays at it's place.
Also important the bottom is now 15px, it refers to the height of the footer. I you want a lager footer edit this value as well or you will mess up things.
In the footer the same position absolute. And this time you have to set the bottom to 0px, to make shure it is place at the end of the wrap.
So I hope you understand. This works fine for me and does exactly what you asked.
You will have to use padding and margin to position some things, but that is up to you, enjoy!
I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!