im trying to make my footer sticky on the bottom of the page (at the end of the page content, even if the content is bigger than the screen) i tried many things, maybe something is conflicting with the code, because it seems to be simple.
here's the basic code im trying:
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
on css:
body
{
height:100%;
position:relative;
}
#main
{
height:100%;
position:absolute;
}
#footer1
{
position:absolute;
width:100%;
height:150px;
bottom:0px;
left:0px;
background-color:#5B5B5B;
}
please, note that i already tried removing the div "main", also tried to use:
<footer>
after the body tag instead of div "footer1", nothing works, except if i put the body height manually to a number instead of 100%, like 1200px, then the footer go to position 1200px, dont know why it doesn't recognize the 100%, i also tried:
<div style="clear:both"></div>
after the footer div
also, i dont want a fixed screen footer "position:fixed"
Thank you for the answer, the problem is that i was not setting a "min-height:1000px) (the approximate px of my content) now its working fine.
The height of your <body> is zero because the height of the parent <html> tag is undefined. Set the height of your the parent to 100% if you want to have the footer positioned absolute rather than fixed to your screen.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#main {
height: 100%;
position: absolute;
}
#footer1 {
position: absolute;
width: 100%;
height: 150px;
bottom: 0px;
left: 0px;
background-color: #5B5B5B;
}
<html>
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
</html>
Related
I am actually working on this Wordpress website and i am trying to fix the footer via code (because via theme options is not possible with this template).
This is the footer.php code
<!-- Footer -->
<footer>
<div class="container-fluid">
<div class="row padding-bottom48">
<div class="col-md-12 text-center padding-top48 text-footer">
<?php sierra_opt_footer_text(); ?>
<?php sierra_opt_footer_social_icons(); ?>
<div class="text-center padding-top72">
<a href="#" class="scroll-to relative">
<p class="sierra-arrow-up"></p>
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end footer -->
I tried in the easy way:
footer { position: fixed; )
Without nice results.
How can i make the footer sticky and fixed?
Thanks in advice.
Try this code
footer {
bottom: 0;
position: fixed;
width: 100%;
}
And add height as per your requirement
This should do the trick (adapted from CSS-Tricks). You should change page-wrap to your theme "page wrapper" class or add one if missing.
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
footer, .page-wrap:after {
height: 142px;
}
try this
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Your css should be this:
.container-fluid {
position: fixed;
bottom: 0px;
}
I'm not sure why you want to fix your footer, though, the footer is quite large and takes up a lot of screen space from the rest of the website; the footer isn't important enough to do this with. What's your intention in this case?
Remove footer's height and add following css to it:
footer{
position: fixed;
bottom: 0;
width: 100%;
}
I have a header that uses position:fixed to stay at the top of the page, it starts as 50px high, however, if a larger/smaller logo is added it's height changes meaning it can then overlap the DIV container beneath it. Is there a way to move the DIV container based on the height of the header. This is the CSS I am using;
<style>
#header {
position:fixed;
top:0px;
height:50px;
width:100%;
}
.container {
margin-top: 50px;
width: 100%;
height: 250px;
}
</style>
This is the HTML I am using, its really quite basic.
<div id="header">
... Menu ...
</div>
<div class="container">
... Content ...
</div>
I have looked into using javascript but I understand this is client side so would not help. Is there a way around this?
You can use jquery to read the height of the container and then use this to set the value for margin-top of container .
Try this code:
$(document).ready(function(){
var h=$("#header").css("height");
$(".container").css("margin-top",h);
});
I have a little problem with my footer on a new website I am building.
I tried the technique from Ryan Fait (http://ryanfait.com/sticky-footer/), but somehow it just won't work out. maybe you can help me and tell me why?
The link to my page is aev.martenzander.com
I only tried it on the index.php, so dont get confused when visiting subpages.
CODE:
HTML
<!-- FOOTER -->
<div class="stickyfooter"></div>
<div class="footer">
<footer>
<?php
include("includes/footer.php"); ?>
</footer>
</div>
CSS
.footer{
height: 111px;
margin: 0 auto;
position: relative;
}
.stickyfooter{
min-height: 100%;
height: auto !important;
margin: 0 auto -111px;
}
So the way it works is you have a mainWrapper class with a set negative margin, then you have a push class which forces that margin to stay clear always, then you have a footer class that occupies that margin.
Right now you have no push class, and your footer class is defined within the wrapper. It needs to be outside the wrapper.
Here's a link with an easy solution:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
The CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Alright I know this has been asked a million time and I have seen a million answers about the body and html tags needing to be a height of 100% for it to work but I cannot get this thing to work. Here it is the problem:
I need my body inside and sidebar content to extend down to meet the other wherever the other stops. I need this for dynamic pages for wordpress. So here is the header.
header.php
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
!!!!content cut to save space!!!!!
</head>
<body <?php body_class(); ?>>
<div id="site">
<div id="wrapper">
<!------break-from-header------>
<div id="wrapperbody">
<div id="bodyinside">
The index.php pages and post.php pages anything with content are calling the header above and footer below. Self explanatory right?
footer.php
</div><!--body-inside-->
<div id="sidebar">
<?php get_sidebar(); ?>
<div id="sidebarlight">
</div>
</div>
</div><!--wrapper-body-->
</div><!--main-wrapper-->
<div id="footer-wrapper">
<div id="footer">
<div id="footer-nav">
<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>
</div><!--footer-nav-->
<div id="copyright">
<p>Powered by: WordPress Copyright 2013</p>
</div><!--copyright-->
</div><!--footer-->
</div><!--footer-wrapper-->
</div>
</body>
</html>
and Finally the css
/******************************Basic CSS**************************************/
html,
body {
background-image:url('http://patriotvoice.net/wp-content/uploads/2013/11/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: 12pt/12pt 'Source Sans Pro', sans-serif;
height:100%
line-height: 100%;
margin: 0px auto;
padding: 0px;
}
/*********************************Wrappers********************************/
#site {
float: left;
width: 100%;
height: 100%
}
#wrapper {
height: 100%;
}
/*****************Main Body******************/
#wrapperbody {
display: block;
background: #ffffff;
padding-top: 70px;
width: 1100px;
height: 100%;
margin: auto;
}
#bodyinside {
display: inline;
background: #fff;
width:740px;
height: 100%;
float:left
}
/**************Sidebar******************/
#sidebar-wrapper {
display: inline;
background: #2E2E2E;
float: left;
position: relative;
width: 340px;
height: 100%;
}
I took out a lot of code but that is the basic stuff. Like I said I need the sidebar and body inside to align with one another. You can see where the content extends past the sidebar and I need the grey to extend down to meet with the white here http://patriotvoice.net..... BUT I need the white to extend down to the grey on a page like this http://patriotvoice.net/news
I think u should use min-height:100%; for all wraps and contents, because u gave body and html tags height:100%;
// sorry, probably I didn´t read your problem well, I'm trying harder with my English but with no significant result
Well first off the site given is looking weird because of the position: fixed on the nav-main-wrapper. Your content is being pushed upwards because of that.
For better coding practices have a header.php, content.php(with the loop), sidebar.php, footer.php to call to the index.
Your height should work fine according it the content you put in it.
Post an example of how it looks with more content for me to better understand how the height:100% isn't working so I can further assist you.
I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.