My CSS CODE
footer {
background-color: #242424;
bottom: 0;
clear: both;
color: #727272;
height: 210px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
z-index: 1;
}
My HTML CODE
<footer></footer>
This is my site
You can see the footer bar on the middle.why is that i used correct CSS for that ??? any help would be appreciated ?
Use position: relative to show footer under main body content or position: fixed to stick it at the bottom of your page.
Use position: relative instead position: absolute;
I see u used min-height: 2000px; .Please used it as the your content go through that point
body {
background-color: #FFFFFF;
font-size: 14px;
margin: 0 auto;
min-height: 2000px;
width: 980px;
}
Remove
min-height: 2000px;
from body
Related
I am working on a small personal project to try and relearn HTML & CSS and I am having some issues with pinning the footer of my site to the bottom of the page.The site can be found here.
I have tried searching online and found that my footer CSS should have the following:
bottom: 0;
position: fixed;
This does pin it to the bottom but it exceeds the width of my container and doesn't look right. Can anyone help?
Thanks.
You have to understand how position: fixed; is working. It ignores any surrounding element. ie. A fixed position element is positioned relative to the view-port, or the browser window itself.
Your .container styles are:
margin: auto;
width: 75%;
So apply this also to the footer:
footer {
bottom: 0;
margin: auto;
width: 75%;
position: fixed;
height: 300px;
background: #2D2D2D;
border-top: 12px solid #3E3E3E;
}
you can try to play around with the width of the footer to see what fits. e.g.
width: 100%;
bottom: 0;
position: fixed;
try this:
body {
line-height: 1;
height: 100%;
display: table;
width: 100%;
}
footer {
display: table-row;
height: 1px;
width: 100%;
}
footer:before, footer:after {
content: " ";
display: table;
}
footer:after {
clear: both;
}
I've tried many different 'sticky footer' techniques, but for some reason I cannot get this to work on my site: http://codeandco.net/services/
Any ideas?
Note: this is different to a fixed footer. I'm trying to get the footer to 'stick' to the bottom of the window, but underneath any of the page content - like this: http://getbootstrap.com/examples/sticky-footer/
add these 4 lines to #footer in your CSS
position: fixed;
bottom: 0;
left: 0;
right: 0;
Code below worked.
Note: the 'footer-push' was the key to getting this to work:
html, body {
height: 100% !important;
}
.wrapper {
min-height: 100% !important;
margin: 0 auto -75px !important; /* the bottom margin is the negative value of the footer's height */
}
footer, .footer-push {
height: 75px !important; /* '.push' must be the same height as 'footer' */
position: relative !important;
}
Some references from: http://ryanfait.com/html5-sticky-footer/
Here's the way: use this example.
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
And don't forget this:
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
If you need footer to be fixed, change footer style to this:
#footer {
background: #CCC;
color: #787878;
font-size: 13px;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
}
But don't forget to add padding for body:
body {
padding-bottom: 60px !important;
}
...or
main {
margin-bottom: 60px;
}
#footer
{
width:100%;
bottom: 0;
height: 20px;
float:left;
}
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
I've tried ways to make this work. Mainly been trying this solution.
That didn't work out for me. The issue I do see is that in my body html css, I do have the height set up 100%, but its not really setting it to 100%.
Here is my css code for my footer and body, html:
body {
font-family: 'AG-Regular', Helvetica, Arial, sans-serif;
margin: 0;
min-width: 1058px;
}
body, html {
height:100% !important;
}
#footerBox {
width: 100%;
height:218px;
background-image:url(/img/footer-bg.png);
background-attachment:scroll;
background-repeat:repeat-x;
}
Here is a link to the site.
You should see where it's messed up at. Any help would be appreciative. Thanks.
To get the header and footer to stick you need to use position: fixed on both.
Example Code
Header
#headerBox
{
position: fixed;
height: 200px;
left: 0;
top: 0;
width: 100%;
}
Main
#mainBox
{
overflow: auto;
}
Footer
#footerBox
{
postion: fixed;
height: 218px;
width: 100%;
bottom: 0;
left: 0;
}
Main problem was the -218px margin-bottom in #maincontent. Make this 218px so that your footer is pushed down. I set your footer to always be on the bottom of the page using position: fixed, not sure if this is what you wanted or not.
#footerBox {
width: 100%;
height: 218px;
background-image: url(/img/footer-bg.png);
background-attachment: scroll;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
}
#mainBox #mainContent {
background-color: white;
margin: 185px auto 218px;
overflow: auto;
padding: 30px 20px 20px;
width: 958px;
}