I just revamped my website and I'm having a bit of trouble with the fine details (keep in mind that I know almost nothing about web development, even though I'm in the software field; I'm trying to learn).
Namely, I noticed on some of my smaller pages (my About page, for example) have a white bar going across the screen underneath the footer. I'd much rather have the footer dynamically extend itself to the bottom of the screen. How can I do this, can I write some custom CSS?
Here's my site:
http://frankpernice.com/resume/
Thanks to flexbox, sticky footers (including those without a fixed height - because hardly anything that is responsive can have a fixed height) have become dead simple (depending on the markup of your page). Fortunately, your markup is excellent for it:
html,body { height:100%; }
body { display: flex; flex-direction: column; }
body>section { flex: 1 0 auto; }
Change to fixed poistion ;-)
.footer-bg {
position: relative;
}
.footer-bg {
position: fixed;
bottom: 0;
}
Aibrean is correct, you need to use a sticky footer similar to that proposed in the link here...
http://ryanfait.com/html5-sticky-footer/
Alternatively you could apply position: fixed; and bottom: 0; to your 'footer' element, but this would bring problems when working with pages that have content that stretches beyond your window height.
Matt
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I'm trying to setting up a template HTML / CSS / Javascript.
My footer don't stay down.
As you can see if the page is full, like this it works more or less good.
But if the page doesn't fills all the screen like this the footer goes up.
If you don't have a good big screen resolution you don't see that. In this case push CTRL &
minus to see the problem (or CMD & minus on MacOs).
I love it and I want to use just that template.
I've tried also something that
footer {
position: fixed;
}
but the footer had to follow the last section.
It's possible to set it to stay at the end of the page maintaining the same layout?
P.S. I prefer to do it only with CSS without using JS, because some browsers can't have it.
Thank U
Try adding
bottom: 0
This should set the bottom edge of the element to the bottom edge of the parent element.
There are several techniques for doing this.
Once technique, which I sometimes use, is the flexbox sticky footer.
To achieve this, give the body the following css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
You'll need to wrap the rest of your site content in a container. Perhaps, <div class="site-content"> then give it the following CSS
.site-content {
flex: 1;
}
Your footer will be placed beneath your .site-content <div>.
This should do the trick.
Tested on template link you provided.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
}
<p>Blabla</p>
<div class="footer">©ikiK</div>
I have the following page with sidebar: https://www.slagerijrudi.be/product/broodje-ham/
I was wondering if there is a simple way to make my sidebar have the same height of the content next to the sidebar. So the sidebar should stretch from header to footer, instead of stopping halfway the page.
In order to allow the aside (or sidebar) to reach its full height, you can make it have an absolute position. Do remember though to turn it off for smaller screen sizes (where you'd want to collapse the sidebar). The best design practice at the moment is to declare specific behaviour for larger screens: #media screen and (min-size:667px) { .. your code for big screens here .. }
Add the following to solve the issue:
.wf-wrap {
position: relative;
}
.sidebar {
position: absolute;
left: 0;
height: 100%;
}
Edit: as a comment on the question put it, a flexbox is a neater solution, but not a 'quick fix'.
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 achieve this example but with the difference that in case there is too much content on my page (between navbar and footer) that this content is down-scaled / squeezed to fit inside (i.e. so that the footer is still visible at all screen resolutions, making it a "fixed footer" in CSS jargon). I'm using bootstrap 3.1.1 and it would be cool if anyone has a solution that is bootstrap-friendly :). Best!
You could always go with a fixed footer and have any additional content scroll underneath it.
Heres a jsfiddle as an example:
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 1.5rem /* or whatever your fixed footer height is */
}
/* and assuming your footer has id="footer" */
#footer {
position: fixed;
bottom: 0;
height: 1.5rem;
overflow: hidden;
}
Please see this answer here, and the example it refers to here. It's going to be a bit different I assume if you've got pictures and everything though. If you could provide an example of your content on jsFiddle we could probably help you scale it a little better.
The best way to describe what I'm looking for is the thread below.
Make div stay at bottom of page's content all the time even when there are scrollbars
The difference is I want a footer like stackoverflow at the bottom but using the jQueryMobile framework. Is this possible?
I've tried the techniques in the other thread successfully for sites not using the framework, but I think the framework forces divs into absolute position and it gets really messy and I'm not sure the best way to do this?
Any help is appreciated.
I found the answer to my question.
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
margin-bottom: 80px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
padding-bottom:60px;
}
I did a variation of the answer I found by Nick here: Jquery Mobile Sticky Footer
What I changed was to use margin instead of padding so that the content didn't increase in size when there was no need for it to.