I'm beginning to get frustrated with CSS. Anytime I think I've grasped one of its many facets, I'm completely thrown off by unexpected behaviour.
I've been trying to make a sticky footer. SO I set the height of my body element to 100% so it takes up the full html element in height ( browser window ). I then wrap everything inside the body in a div except for the footer element, and set this div's height to 100%, thinking that this will take up the full body in height and so push the footer off the bottom of the screen. I could then apply a negative margin yo bring it up and fix it at the bottom.
But the footer sits at the bottom of the page below all the body, without need for a negative margin.. So my idea of setting height to 100% is completely thrown off.
What's happened here?
If you want to create a fixed footer, then you don't need to worry about the height property.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: yellow;
}
<body>
<p>This is the body</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
HTML
<div class="footer">Content</div>
CSS
body{
margin:0; //you need it for the correct bottom margin
}
.footer
{
position: fixed;
bottom:0;
height:75px; //height of the footer
color:white;
background-color: black;
width:100%;
margin:0px;
}
Related
When the user goes at the end of the page with the scrool, there he can see the footer. the footer must appear only at the end of bottom when the user go at the end. My code work when there are a lot of components in the page, so the footer does what I want. The problem is when the page has a little component the footer appears in this way:
My CSS are :
html{
min-height: 100% !important
position: relative !important
}
#footer{
background-color: #30373d
width: 100%
position: relative
height: auto
}
<div id="footer"></div>
Anyone can help m
Just add a wrapper around your content and give it a min-height:100vh; (or whatever height suits your actual layout) property like below.
If you want the footer to always appear at the bottom of the page, set it to positon:absolute;
body {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
}
footer {
min-height: 100px;
width: 100%;
background: black;
}
<div id='wrapper'>
very little content
</div>
<footer></footer>
Instead of working on the footer, work on the content. Given that your footer has a fixed dimension you can ensure the body content will always take at least the portion of the empty screen minus the footer size. For example you could specify your content min-height like this:
.content {
min-height: calc(100vh - footerDimension)
}
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
I basically have some sibling divs, header, content, footer. I want the content to dynamically fill the space of the parent left by the header and footer when the window is resized.
I've tried using height:100% on all or some of them and that always makes the elements too tall. I don't want a scroll bar. Can this be done with just CSS or will I have to use Jquery?
http://jsfiddle.net/2fnA7/
HTML
<html class="fill">
<body class="fill">
<div>header</div>
<div class="content">content</div>
<div>footer</div>
</body>
</html>
CSS
.fill
{
height:100%;
}
.content
{
height:100%;
}
If you have fixed heights for header and footer, you can do this by setting both top and bottom on the content div i.e.
<style type="text/css">
html, body{width: 100%; height: 100%; margin: 0; padding: 0}
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888}
.content{position: absolute; width: 100%; top: 100px; bottom: 100px}
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888}
</style>
That's correct, the height of the box is 100% of the container, however you also have to take into account you have borders, and the footer in there too.
so total height is:
height of container + sum of borders + height of footer.
this will force a scrollbar.
There are many ways to simulate this effect, each with a compromise.
1st. fixed header, footer and set top and bottom : jsFiddle
Compromise, Elements are fixed in size and design is rigid thus and isn't content driven. can make upates harder in the future because everything is absolutly positioned.
2nd. Percentage proportions : jsFiddle
Compromise, Everything scales - not just the content area. Which means the bigger the screen the bigger your header and footer.
3rd. Mix and match, fix what is fixed and leave flexible what needs to be flexible : jsFiddle
Compromise, although more flexible it involves hiding content which is can be difficult to manage.
By no means do you want to use any one of these methods. Look at your content and mix the methods that will give your content the most space and best appearance. CSS properties like calc() will make this easier as time goes on but browsers need to get there first.
I would reccomend looking at option two as its the most flexble and implement a min and max height if you need to restrict your header and footer getting too big. (jsFiddle)
This is working:
the header and the footer based on pixel and the content based on percent.
page.html
<style>
.header
{
background-color:#222;
padding:5px;
position: absolute;
top: 0px;
left:0px;
right:0px;
height:100px;
}
.content
{
background-color:#CCC;
padding:5px;
position: absolute;
top: 100px;
bottom: 50px;
left:0px;
right:0px;
}
.footer
{
position:absolute;
bottom: 0px;
border:1px;
height:50px;
background-color:#09F;
left:0px;
right:0px;
}
</style>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */