I know that this question has been asked many many times, but I haven't found a solution that actually works for me.
My html...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
My css....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?
I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.
body, html { min-height:100%; }
That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.
#container is missing a bracket and should be #container {.
If those issues are fixed, in addition to the issues #Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".
Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
Related
I have no idea how to fix this.
Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.
Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.
EDIT:
Silly me... I forgot the html here.
Right now it has nothing in it so it is just:
<div class="footer"></div>
I have it like that just to test it.
To see what is happening you can visit it here:
http://www.yenrac.net/theme
I hope that helps clarify some things.
I have also created this theme from scratch.
If I got your question right, this should work:
http://jsfiddle.net/9qq1dtuf/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 170px;
}
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px; left: 0;
}
Please try bellow css
.footer {
position: fixed;
bottom: 0;
height: 150px;
background: #3167b1;
width: 100%;
left: 0;
}
<div class='footer'>
</div>
Well, I doubt it's Wordpress ...unless you are using a pre-made theme (or something along those lines). It's pretty hard to see what you've done without seeing the HTML. But anyways, heres what I think might have been the problem:
You have selected the footer element that has a class of "footer". I'm going to go ahead and make an educated guess that you meant to select the footer element by its name (NOT it's class). So maybe it's just a small little tiny bitty fix (i.e. remove the "." before footer in your CSS):
footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
Just add this to your css:
body {
margin: 0;
padding: 0;
background: #efefef;
font-family: 'Lato', serif;
padding-bottom: 174px; //add this line - height of footer + margin from content
}
I added 24px margin from content as an example. It would be best if you added this to your css:
* {
box-sizing: border-box;
}
or just for the body
body {
box-sizing: border-box;
}
So as your added padding does not add to your height and you get unnecessary scroll-bars.
Things i want achieve is quite simple
just at top a fixed position element that do not move while scrolling
down the document.
and after is a div#content have some margin-top from the top edge
and center in the window.
so the code is:
html
<div class='head-container' id="headerCom">
<header id="a"></header>
</div>
<div id="content" role="main"></div>
CSS
* {
margin: 0;
padding: 0
}
body {
width: 100%;
height: 100%;
position: relative;
}
.head-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100px;
background: red;
_position:absolute; // make the ie6 support the fixed position
_top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
}
header {
display: block;
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
zoom: 1;
background: blue;
}
#content {
border: 1px solid black;
margin: 130px auto 0 auto;
width: 960px;
height: 1000px;
background: #999;
margin-top: 150px;
}
all the modern browser is well support,but in ie(ie7,ie8,ie10) do not work correctly,things is just like it ignore the margin-top i set to the div#content;
so far i have checkout the other question on stackoverflow,and i try almost everthing i could.
when i change the margin-top of the div#content to the padding-top,things okay.
When i put a div.clear(clear:both)in between the div.header-container and the div#conetent,the things goes okay;
Or i follow other questions' solution that it caused by the hasLayout, and then take out the width and height of the div#content, the things is also okay, but in this way, i will need to put another div#inner-content inside the div#content, and set width and height to it to see the result.
so i am quite confused by the hasLayout, and i am not quite sure i am completely understand what it is and not quite sure what is happening in here in my code.
So actually can all you help me with this, is there any other solution could fix this problem, and explain this wired things to me?
Thank you anyway.
It works fine for me once I get rid of the last margin-top attribute. Do you know you have set it twice? Once with margin and them again with margin-top. If you edit just margins first value it wouldn't work because the last one will override the first one.
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo
I seem to have a problem with the footer on my website. Basically its not sticking to the bottom of my page, but sticking to the bottom of my div, called main. Can anyone help me with this?
If you zoom out on the webpage you will see the problem :)
this site
Im not pasting in the code, cause its a lot of php includes and such. Hope it's okay. :)
footer css:
#footer{
width: 100%;
float: left;
height: 70px;
bottom: 0;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block;
}
#footer{
width: 100%;
height: 70px;
clear: both;
background-image: url("../images/footer_pattern.png");
position: fixed;
bottom: 0;
}
For the website you are referring to, by extending the wrapper div, it will push the footer down. Below is the modified css for wrapper.
#wrapper
{
height: 100%;
margin: 0 auto;
min-width: 1000px;
}
Put 100% for the height instead of auto.
By making the wrapper height to 100%, it extends that div to the bottom of the window and pushes the footer down as well.
Another thing I would change is not make #footer float left.
Can someone please help me eliminate the extra whitespace at the bottom of this website? http://www.vonlay.com/
This image shows what I am trying to remove: http://img691.imageshack.us/img691/8837/screenshot20110607at715.png
Here is how I have the footer setup.
html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
margin-top: -140px; background: #700; color: #fff; }
You should add:
#footer .content p {
margin-bottom: 0
}
I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:
You should add overflow: hidden to #footer.
This will resolve the problem, which is that the margin on the p element inside <div class="copyright-notice"> is collapsing through #footer. See: collapsing margins.
If this seems unlikely to you, try adding this, just to see what happens:
#footer .content p {
margin-bottom: 200px
}
Try increasing the height of your footer:
#footer { height: 145px; }
Try setting padding and/or margin on the bottom to zero for the footer and/or body.
Try using positioning:
#footer {
position: absolute;
bottom: 0;
}
in the footer class change
height: 160px;
try....
Try this:
Add a wrapper around every HTML element in your "body" element, excluding the footer, then in CSS do this:
.wrapper {
min-height: calc(100vh -<your-footer-height>px);
}
You don't have to add any styling to the footer since it's not in the wrapper. so the content just takes the viewport height of the device screen.
put this in your section CSS
min-height: 100vh;