I have this very simple footer :
.footer{
width:100%;
background-color:#333;
height:100px;
position: absolute;
bottom: 0px;
}
and this container :
.container{
position:relative;
height:100%;
width:980px;
margin:0px auto;
}
The container's (content) height is 100% so it is based on the amount of results you get from your search query. I want the footer to stick underneith the container at all time. And when you have no results I just want to have it at the bottom of the screen.
I tried to give the container a padding-bottom the height of the container and change the posistion but it didn't help. Does anyone has an idea how to solve this?
try this:
.footer{ width:100%; background-color:#333; height:100px; position: fixed;
bottom: 0px; }
Changing position absolute with fixed
DEMO
see this CSS to make HTML page footer stay at bottom of the page with a minimum height
and http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I hope this will helpful for you.
Related
Here is my website: http://www.bkd.com/wealth-advisors/index-test.htm
The problem I am currently having is that the "Wisdom for Your Wealth" bar will only show up on certain resolutions. Is there anyway I can make this show up on all? I need it to lay across the page the same on every page. A little below the bottom but not all the way at the bottom.
Anyone have any suggestions?
Here is my CSS:
.bottombar {
position:fixed;
margin-top: 800px;
top:0px;
left:0px;
height:42px;
width:1800px;
z-index:100;
}
Here is the HTML
<div style="position:absolute; top:-50; left:5; font-size:80px; z-index:4"><a
href="/wealth-advisors/about-test.htm"><img src="/wealth-advisors/images/wisdom-
wealth.png" height="52" width="800" class="bottombar" ></a></div>
Please let me know if you need anything else from me.
Thank you!
-Marcy-
This will solve your problem:
.bottombar {
bottom: 0;
display: table;
height: auto;
position: absolute;
width: 100%;
}
With width: 100%, position: absolute and display: table you don't need to adjust top, left or any margins.
use bottom:0; i would may try removing the margin top as well. i would change the width to 100%. also remember you have the image in a div that's absolute and the image is fixed.
I am aware that using the css
#fullpage{
top:0;
bottom:0;
left:0;
right:0;
width:100%;height:100%;
position: absolute;
}
fills the entire page, however I want this, then below it, i.e one page length down, I want another space that is equal to 100% of the screens height.
So in theory I want two divs, both equal to 100% screen height and 100% screen width, one ontop of the other, equalling to 200% of the page height.
Any help guys?
For the second div, add top: 100% in addition to the rules you already have.
http://jsfiddle.net/ExplosionPIlls/FZG49/
No need for absolute positioning..
just reset the html and body and add two full width/height divs..
<div id="page-1"></div>
<div id="page-2"></div>
with
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
#page-1, #page-2 {
width:100%;
height:100%;
background-color: red;
}
#page-2 {
background-color: blue;
}
demo at http://jsfiddle.net/FZG49/1/
I have this css, now it looks like a want it to in my 1366x768 laptop screen, it appears at the centre of the screen at the bottom. But when I move it to my larger screen, the footer appears in a different position, further up the page.
Can anyone give me some suggestions please?
position:relative;
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;
This is why:
margin-top:38%;
38% of any different screen height will result in a different position for your footer, assuming it is position relative to the body and not to another element that may have another position. In your case I would be willing to bet it is relative to the body.
If you change that to position absolute, then give it a bottom value it will stick to the bottom of the screen.
position:absolute;
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;
If you do
position: absolute;
margin-right: auto;
margin-left: auto;
with the width that you already have, that should centre it. Then
bottom: 0;
should put it at the bottom of the screen. Then you can get rid of left, right, margin-top.
[edit] The finished thing would look like this
position: absolute;
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
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>