I am trying to fix my footer to the bottom, despite where I am on the page. I tried
.home-footer{
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
}
but it only works if I take the footer outside of the body and position it right below the html element. How can I make this work while keeping it in the body?
EDIT I found the issue was that my body had transform: translateX(0). That seemed to be conflicting with the fixed footer, because as soon as I got rid of that, it worked. However, I need that rule, or else my slide in navigation breaks.
I found out the issue was a conflict between applying a transform to the body, and having a fixed footer. There appears to be an issue combining those two rules together like that. I resorted to using left positioning for my animation, rather than transform, and it fixed the issue. It's not ideal, but it worked.
Try this:
HTML:
<body>
<div class="container">
<footer>Your footer</footer>
</div>
</body>
CSS:
// wrapper in your body, where your footer will be in
.container {
position: absolute;
top: 30px;
}
footer {
position: relative;
bottom: 0;
width: 100%;
height: 20px;
}
Add this to your CSS:
html, body {
width: 100%;
height: 100%;
}
Related
I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
I finally got a sticky footer to work with a push div. Unfortunately, I now have a strange block above my wrapper that has shown up. I would like to get rid of this of course.
Site in question:
http://print503.squarespace.com/gallery/
Basic HTML structure:
<body>
<div id = "wrapper">
[all content divs (dynamic/responsive)]
<div class = "push">
</div>
</div>
<div id = "footer">
</div>
</body>
Basic CSS Structure:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
z-index: 1;
}
.push {
opacity: 0;
height: 50px;
bottom: 0;
}
#footer {
background-color: #000;
height: 200px;
bottom: 0;
}
So I'm overriding the template for this squarespace site with my own HTML and CSS. I think the wrapper (named "#outerWrapper") is a background image. I don't know if this is what is causing the problem with the block at the top that now appears.
I've done hours of research and cannot figure out this issue. Would love some help. Thanks in advance.
Adding
#outerWrapper {
display: inline-block;
}
seems to fix it, if that's what you're going for (to get rid of the top black bar and have the background image show all the way to the top).
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/
It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px} or doing container {margin-top:34px}.
However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.
Any ideas?
Here's a Fiddle example: http://jsfiddle.net/jrZKb/
Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):
http://jsfiddle.net/jrZKb/1/
<body>
<header> Header</header>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
header
{
background-color: green;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: blue;
}
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}