I want to design a footer such that it should be at bottom of the webpage when there is less content in the body and should be pushed down if the content of the body reaches to footer.
If I do like this
footer{
position: absolute;
bottom: 0;
width: 100%;
}
It doesn't go down if the body content increases.How can I do that?
please help me. Thanks in advance.
Here's a working jsfiddle
You can use padding-bottom: with the same height of your footer to achieve the effect:
#body {
padding:10px;
padding-bottom:60px;
}
Change your position to "relative". When you use "absolute" you fix it to a particular position which in this case is at the bottom the startup screen. Using relative will position the footer relative to other elements on the page. If other element change their position, so is the footer.
Related
My footer is not sticking on the bottom of my page. It only goes until the bottom of my screen, but when I scroll down, the footer is stuck on the location where my bottom of screen was. It sticks on the bottom of my screen but not on the bottom of my entire page. Someone please help I almost tried everything. The body and html doesn't take up the size of my whole page too, only the size of my screen which is 1920 x 1080. I tried every sizes like 100vh, 100%, min-width, set the footer div to absolute with bottom: 0, and none of them works :( (I'm also a newbie)
One time I managed to make the body fill the whole page but the footer is still stuck in the position.
Try to set body to:
position: relative (so the footer sets it's absolute position according to the bodys position)
You might even need to do:
body {
min-height: 100vh //as you have already
position: relative;
padding-bottom: 150px //same height as you footer
}
Most simple way to achive it is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer-container a negative margin-top:
footer-container {
clear: both;
position: relative;
height: 150px;
margin-top: -150px;
}
I want my footer to be at the bottom of the page after the content on each page (not fixed)
I read the post about creating a sticky footer, and I tried:
position: absolute;
bottom: 0;
But my footer is still right after the image which was floated. I put in a clearfix but that didn't solve it. What am I doing wrong, here is the link:
I guess your problem is the height of "main-content".
Remove it, and set:
html {
position: relative;
min-height: 100%;
}
And "padding-bottom" on your "main-content" with the same (or more) height of your footer, for spacing.
A complete example can found at CSS-tricks
Setting
position: absolute;
bottom: 0;
gets it to bottom of window but if your page is longer you get a result like your page..
Instead you could set it to fixed, wrap the other content and leave 75px space underneath for your footer, check this ;
Use:
position:fixed;
bottom:0px;
I have a header div, which i want to see all the time even if i scroll down.
I want it always on the top of the page.
Which code should i add to my CSS file?
Or do i need to add a javascript inside my .php file?
Apply the below css to your header div
position: fixed;
top: 0px;
if header fixed top
change:
.Your_class{
position:fixed;
top:0;
left:0;
}
Fix the header to the top:
.header {
position: fixed;
}
Move the rest of the content below the header:
body {
padding-top: 50px; // Height of your header
}
Setting position to fixed will take the element out of the normal flow of the document and display them on top of (or under) the normal flow. If you want to avoid having other elements hidden under the fixed element you need to use margin or padding in the appropriate places - in this case a top padding on the body element will do the trick.
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I'm trying to make a sticky footer, but it's not quite working for me.
CODE: http://jsfiddle.net/PC8x7/1/
As you can see in the live view, the footer comes underneath the rest of the page but you have to scroll to get there. How can I avoid this, and only have it have a scroll bar when it needs to?
you have to get rid of the margins in the main containers and headers
see the note about heights and margins http://www.cssstickyfooter.com/using-sticky-footer-code.html
Your wrapper has min-height: 100%; and your footer is placed underneath the wrapper. The wrapper is 100% of the height of the page and the footer is put right underneath the page forcing the scroll.
There's a couple ways you can get around the issue. You can try putting the footer inside the wrapper, setting wrapper's position to relative, and absolute positioning the footer to the bottom.
css:
.wrapper {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
.footer-link {
text-align: center;
}
html:
<div class="wrapper">
...
<div class="footer">
<div class="footerlink">
<p><span>© Domain.tld</span> | </p>
</div>
</div>
</div>
As i understand - you want to put footer on the bottom of the window ?
method A. - make it position: fixed
method B. - play around with wrapper height 100%, overflow and border-box
http://www.quirksmode.org/css/box.html . You can put footer over wrapper padding this way
method C. - Javascript