Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I don't know why this is not working and it's driving me crazy. The footer is not sticking to the bottom of the site. In the views of my app where the content is not longer that the viewport the footer is sticking well, but when the content is longer, the footer stays at the bottom of the viewport instead of at the bottom of the page.
I've set the position as absolute and the bottom as 0. Also I've set the containing element, which is the body, as position relative so that the footer absolute position is relative to the body, but it doesn't work either way.
Here's the code (I've separated the header and footer partials of every view of my app, but it works as if it was one file)
CSS CODE
body {
position: relative;}
.footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 50px;}
By using position: absolute;, you've taken your footer out of the normal document flow. The layout isn't leaving any space for it so as the length of your content increases, an overlap is going to appear.
The layout issue you're trying to resolve is incredibly common and there are tried and tested ways of dealing with it. Many solutions require you to know the height of the footer which is rarely practical. If you knew the footer was always going to be 100px for example, you could simply set padding-bottom on body in order to add the necessary space.
Flexbox
Thanks to flexbox, there's an easy approach that doesn't require you to know the height of the footer element.
HTML
<html>
<body>
<header role="banner">Site Header</header>
<main>Content</main>
<footer role="contentinfo">Footer</footer>
</body>
</html>
CSS
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header[role="banner"],
footer[role="contentinfo"] {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
}
By telling main to occupy all of the remaining space (flex: 1 1 auto) in the flex container (body), you're going to push the footer to the bottom of the page.
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On my work2 Website i am having problems with keeping down the footer in my page to the bottom, when there is not enough content in the page. I googled already, searched on youtube csstricks etc.
But there are always the same "solutions";
but not for my page. Now i am here for some help.
What i want is this.
I would really appreciate a good solution.
Your sincearly.
Mike
You can simply implement the code from the link. The keys are:
fixed footer height, and having it absolutely positioned with bottom: 0 inside a relatively positioned element
content bottom padding that equals the footer height in order to push it downwards if needed
So, for your website, you need to add the following:
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
}
.content {
padding-bottom: 60px;
}
Just tested it on your website by appending it to your style.css file.
Move your footer inside the body, it's invalid html otherwise. Also you can use flex to simply stretch the content to fill the space left over on the screen:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
Why use this method? Simple, footers don't need a specific height this way, it can be variable in height if needed.
If you follow the example that you provided, you'll see that the html and body tags both have the height attribute set to 100%, and the wrapper div has a min-height of 100% and is set to relative.
That allows the footer div in the example to be absolutely positioned on the bottom of the wrapper div, which also happens to be the bottom of the page.
If you have Chrome, open up the DOM inspector and select the html or body tag (your choice), the wrapper div, and the footer div in that order and you'll be able to follow along.
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
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
If I open my (GWT) page in a normal browser, everything works fine. The body takes the whole width and the content is nicely centered. But if I try this on a mobile phone, the body does not take the whole width and therefore the content is not centered.
I couldn't find out why it is being displayed like this. Also, adding 100% width to body and html tag does not solve the issue .
Is there a way to get this working nicely on a mobile device?
The page can be reached under: http://www.vegantastic.de/
this was driving me crazy and i just solved it by adding position:fixed to the body
Why is body not full width, even though its set to 100% / vw?
In a strange way it is full width, but the viewport is scaled down automatically by the browser, so it fits in the overflowing content.
To check, if this is the case, type this in the console (1): window.visualViewport.scale
1) edit Sep. 2019: visualViewport: only available on Chrome - sry for late notice
If it returns something like 0.8, then the body size is correct, but the viewport is scaled down.
You can also double tap to toggle between scale 1 and "fit-content-scale" (needs touch simulation like in chrome dev-tools).
How to not overflow body?
See here https://stackoverflow.com/a/14271049/3313410 "Creating a site wrapper div inside the body"
or check, if a certain element has a min-width, that "overrides" its width
or check, if something is rotated, or margins out https://stackoverflow.com/a/45534745/3313410
It might be because of a very long word on your webpage. After using the correct viewport meta tag:
<meta name="viewport" content="initial-scale=1.0, width=device-width">
I tried this out, by placing this text inside a paragraph element, inside some empty HTML document:
<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it's real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>
What happened when I decreased the screen size without the mobile phone simulator:
And what happened when I decreased the screen size with the mobile phone simulator:
Quite the difference. My tip: use the following CSS attribute:
p {
word-break: break-word;
}
I can see that the problem behind this question was solved, but I just experienced the same issue and the answer here could not applied in my case because of the scroll disabling stated in the comment, and any other style modifications on the body seemed to affect the result.
After experimentation I found out this was caused by an element inside my page which was rotated and its height became an obstacle on mobile, since it was closer the right end of the body.
So I would like to add this answer if someone, like myself, find this question via google:
This problem can be caused by many factors, you may want to investigate if one of your component's width is not becoming a problem on mobile view. There is probably a div too long on your page, or a rotated one which margin got out of the body.
Just add this to your body tag and your problem should be solved:
body {
position: absolute;
}
In my case, body (and html) element returns to normal after removing the properties from display: flex; group. After my investigation, I discovered that every element with an automatically calculated width must be in an element that has height and width and wraps all children going all the way to the body. After adding some overflow:auto; position:relative; to the parent elements, the body scales correctly with display flex nested in display flex.
#import '../../variables.scss';
:host {
overflow: auto; // added this line
}
.top-bar {
display: flex;
flex-direction: row;
padding: 10px;
box-shadow: $shadow;
position: relative;
.search-item {
flex: 1;
margin: 0 1em;
display: flex;
flex-direction: row;
position: relative;
input {
margin: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right-width: 0px;
flex: 1;
width: 1px;
}
button {
margin: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 1px solid #ccc;
border-left-width: 0px;
box-shadow: inset $shadow;
}
}
button.icon-only {
border: none;
background-color: transparent;
}
}
menu looks like this:
before:
after:
I had the same problem. In my case there was a grid element that had many columns and grid-gap set to 50px. It caused html to expand. I think it's a good practice to reduce grid-column-gap on small screens.
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).