So I keep my footer at the bottom of my page with the following code:
It's a vue project so #app is my container with my content and footer in.
#app {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem;
}
This works great in Chrome but somehow Firefox doesn't really care and just let's my footer float below my content.
Am I missing anything here?
I think you should be changing position to position: fixed.
Related
I have a fixed header which is hiding the top part of the scrollbar.
It's caused by setting overflow: auto on both hmtl and body.
However, if I don't do that, it breaks the floating header on mobile browsers (except Firefox).
I'm not sure what to do here, it seems I either have the header over the scrollbar or a broken fixed header on mobile browsers.
Here's an example.
html, body {
height: 100%; width: 100%;
margin: 0;
overflow: auto;
}
header {
position: fixed; top: 0; left: 0;
width: 100%; height: 7.5em;
z-index: 1000;
}
I removed overflow: auto from body and added user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>. That does the trick.
See this answer
Update: it's a Chrome-only bug, as Josh Crozier figured it out.
Resize the window vertically, to see why the code below does not work. The child element does not stay at the bottom of the parent. Why?
header {
background: red;
height: 50%;
left: 0;
position: fixed;
width: 300px;
}
header div {
bottom: 0;
position: absolute;
}
<header>
<div>Lorem</div>
</header>
This is currently a Chrome bug (as of version 47 and maybe earlier versions).
It only seems to apply to elements with fixed positioning. The issue is that the elements are repainted/rending incorrectly when resizing or scrolling. It's worth pointing out that the elements are definitely repainted/rendered, but it seems like they are rendered relative to their initial position when the DOM loaded.
This behavior is likely related to issues 454216, 153738, and 20574.
One work-around would be to wrap the element and absolutely position it relative to the parent element with the same height as the header ancestor element:
header {
height: 50%;
left: 0;
position: fixed;
width: 100%;
}
header .wrapper {
background: red;
height: 100%;
width: 300px;
position: relative;
}
header .wrapper > div {
bottom: 0;
position: absolute;
}
<header>
<div class="wrapper">
<div>Lorem</div>
</div>
</header>
Because <h1> has its own margin. Try
header h1 {
bottom: 0;
position: absolute;
margin-bottom: 0;
}
I have a site that is a one page scroll type. I have a fixed menu at the top and this works fine on desktop browsers. It does not work on mobile however, and the menu just stays at the top and when you scroll down it disappears.
My CSS for the header is:
#header {
background: url('../_images/menu_bg.png');
padding-top: 10px;
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 80px;
}
line: 1092 of your styleMobile.css you have this css snippet:
#header {
positioN: relative;
}
Removing that fixes the issue.
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
I need to fix a footer to the bottom of the viewport. IE 6 is the problem--and yes, it must work in IE 6. That much, is not my call.
Using this:
div#footer {
width:1020px;
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
In my IE6.css I can fix the footer to the top of the page. But if I switch it to this:
div#footer {
width:1020px;
position: absolute;
bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px');
left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
It goes haywire. Am I implementing the expression function wrong for fixing it to the bottom of the viewport?
Thanks!
Don't use the expression clause. From my experience it can render the page a little on the slow side and behaves oddly. Some times it'll work and others it'll simply fail not gracefully.
I've had good success with these methods.
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But without seeing your entire page it's a little harder to see if any of the links I provided will get in the way of your current stylesheet.
Try using this instead of expressions:
* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.box {
position: fixed;
left: 50%;
top: 180px;
margin: 0 0 0 -370px;
}
* html .box {
position: absolute;
}
/*
Fixed Positioning in IE6
http://ryanfait.com/
*/