I have been working on my brothers web-site making some changes and I wanted to get the footer down.. (should have done this in the beginning..)
But it won't go down, I have tried every basic trick I know but for some reason it won't go down.. I think I missed something or did something wrong.
Can someone please help me! Because I have a case of tunnel vision and I don't see the mistake I made.
Website
If you need something I will post it!
Thanks in advance!
You can use Sticky Footer. Wrap your content in a div but exclude the footer script:
<div class="page-wrap">
ALL Content
</div>
<footer>
//footer script
</footer>
Then in your CSS set a height for your footer and use the same value as a negative margin for your wrapper and the :after selector:
html, body {
height: 100%; //make sure you add this
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px;
}
.page-wrap:after {
height: 100px;
content: "";
display: block;
}
footer {
height: 100px;
}
Related
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)
}
In my react project, my footer is overlapping my elements near the bottom of the page.
see live project here: https://surpay-app.herokuapp.com/#/?_k=wo17rb
I have looked at many other questions about this topic as this is a common issue, but I think mine has to do with different react components acting strangely with one another.
I've tried to play with the margins, of the body, as well as the content. I've played with overflow as well as different display styles for the footer. None of this fix the issue. I'd like the footer to stick to the bottom (so i have a position: fixed) but I dont want it overlapping my content. Adding bottom margin to body doesnt help either.
It seems like this shouldn't be an issue anyway, given that the footer is a component that is rendered after the rest of the content. Here is the JSX:
render() {
return (
<div>
<Navigation />
{this.props.children}
<Footer />
</div>
);
}
You need to add a margin to the bottom of body to account for the space taken up by the fixed footer:
body {
margin-bottom: 80px; // footer height plus 10px
}
Nothing to do with react. It's your css that's wrong.
Add all the <footer /> styles to the <div class="Footer" /> instead.
.Footer {
height: 70px;
position: fixed;
bottom: 0;
background: #201D1E;
padding: 10px 0;
width: 100%;
}
.footer {
padding: inherit;
}
Having the wrapped in a div called Footer just seems like bad html though. Doesn't make sense.
On body remove height and add padding-bottom: 70px.
On #app change height: 100% to min-height: 100vh
On .homePage change height: 400px to min-height: 400px
On .Footer remove height: 70px
It happened to me while using CSS-Flexbox,
Try this:
.mydiv{
display: flex;
flex-direction: column;
}
for example: having two React Components one after the other, Let's say we want to render the following:
return(
<div className="mydiv">
<Comp1 />
<Comp2 />
</div>
)
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.
This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?
Let me know if you want me to post my html/css.
There are a number of good examples on the web of this.
Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.
And this is the classic version that has been around for a long time and well used by many:
http://www.cssstickyfooter.com/html-code.html (waybackmachine archived)
Here's my own slightly edited version of the second link that I've had good luck with.
/* Sticky Footer Stuff
*/
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
height: 160px;
margin-top: -160px;
}
/* end sticky footer stuff
*/
<div class="wrapper" id="sticky-wrap">
<div class="content-area”>
</div>
</div>
<footer>
</footer>
I've had a similar issue.
I always wanted my footer to be at the bottom of the page, but never overlap the other div's.
The best solution I came up with was :
CSS
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#media screen and (max-height: 700px) {
#footer {
position: relative;
}
}
HTML
<div id="footer"></div>
This will keep the footer always on the bottom of min-height 701px, and below that it will be at the bottom relative to other divs. Of course you can change the parameters and set it to your own pixel measurements.
Hope this helps.
I am trying to get my footer to sit at the bottom of all the content, regardless of how much content there is. I've tried many different approaches, but none seem to work for me. At first, I got the footer to sit at the bottom of content, but then there was "whitespace" below the footer because there wasn't enough content to make the footer reach the bottom of the screen. Now, I got it to sit at the bottom of the screen, but it will intersect content, like this:
I want it to sit below the second row of content, but I can't seem to get it to do that, while still sitting at the bottom of the content when there is less content. Here is a demo.
For the footer intersecting the content, check here
For the footer not going to the bottom of the page when there is a little bit of content, check here
Here is the CSS for the footer:
footer {
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
The way your are structuring your HTML code is incorrect. Right now you have:
<header></header>
<div></div>
<div></div>
<div></div>
<div></div>
<footer></footer>
What you need to have is something like this:
<div class="page-wrap">
<!-- all your DIVs with the main part of your code should be in here -->
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
This CSS code is needed in order for the sticky footer to work:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
.site-footer {
/*your footer code here*/
}
Follow that structure should help get your footer to always stay at the bottom. Example code has been taken from CSS Tricks
What you want is a bit tricky, I think I've faced the problem before, not sure I've solved it properly. Now I would use javascript, I know it's not optimal since you'd also have to listen to the size of the body etc.
But it's basically an if/else case, if content's bigger than window's size, then footer's position: relative;, else it requires fixed or absolute position. Note that for the relative position to work you'd have to remove those float: left; on your <div class ="rows">...
Another alternative would be to use some kind of filler, to fill up the space, and always keep the footer relative, but that's the same problem, it has to be dynamically computed according to window's size.
It's quite similar to the centered height problem, not that easy to figure out
You can try this floating footer solution:
Thanks
Eric Chang
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
#page {
margin: 0;
padding: 5;
}
#footer {
display: block;
width: 100%;
text-align: center;
background: black;
color: white;
bottom: 0;
position: fixed;
}
</style>
</head>
<body>
<div id="page">
Test here
<br>
</div>
<div id="footer">
Footer Here
</div>
</body>
</html>
The footer is at the bottom in my browser in the second example. What Browser are you getting the errors on?