Basiclly i am try to make my header fix at the top of the page, and at the same time i also need my footer must be at the bottom of the page, whethere there is less or more content. But i don't want my footer position fix. So when ever there is large amout to data footer move with that. The code i am using right now is workin great if i don't make my header fix.
<body>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
CSS for this is
*{ margin:0px; padding:0px;}
html{
margin:0;
padding:0;
height:100%;
}
body {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
This is the code, I have not fixed my header in this , but i need some help to it fix.
What you are looking for is specifically called "sticky footer".
http://www.cssstickyfooter.com/
If I understand you right, it seems to me that you're after a sticky header. Try replacing your two rules with following
#header{
background: none repeat scroll 0 0 #55EEEE;
padding: 10px;
position: fixed;
top: 0;
width: 100%;
}
#content{
background: none repeat scroll 0 0 #FF0000;
color: #FFFFFF;
height: 2000px;
margin: 40px 0 0;
padding: 10px 10px 80px;
}
Here is the demo changing the #content height affects footer position but not header's.
Use this
position:fixed;
For your header.
As for footer - use this http://ryanfait.com/sticky-footer/
Related
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
It's been a while since I handcoded a website, and now I have the issue that my top-margin causes the 100% height to give a nasty scrollbar, as seen in the fiddle:
http://jsfiddle.net/qKGzA/
I can't figure out how to get rid of this, without cutting off the footer (like with using overflow:hidden).
It probably is a simple solution but I can't think of it :)
Thanks for your help!
My code:
html, body{
background-color:#ececec;
height:100%;
width: 100%;
margin:0;
padding:0;
}
div#wrapper{
background-color:#ffffff;
width: 962px;
height: auto !important;
min-height: 100%;
height:100%;
margin:0 auto;
padding:20px 15px 0px 15px;
position:relative;
display:block;
}
footer{
background-color:#363636;
width:95%;
height: 15px;
margin:0;
padding:10px;
position:absolute;
bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#e1e1e1;
text-align:center;
}
footer p{
margin:0;
padding:0;
display:inline-block;
}
footer p.divider{
margin:0 20px;
}
HTML:
<body>
<div id="wrapper" >
<header>
header header
</header>
<menu> Menu menu</menu>
<section>
section section
</section>
<footer>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p>
</footer>
</div>
</body>
The div#wrapper has height:100% and padding:20px 15px 0px 15px making it 100% + 20 pixels. if you add
box-sizing:border-box;
to div#wrapper the padding will be inside the 100%, and the scroll bars disappear.
A non-css3 alternative is to place an element at the top of the inside of the div#wrapper with a height of 20 pixels. Perhaps add the 20px top padding to the header element which is inside the wrapper for non CSS3 browsers.
a. Does your body have to have the height and width assigned? Couldn't you simply set the background. It should automatically span any width non-dependent on the user's screen.
b. You could set the body to position: absolute; left: 0; right: 0; top: 0; overflow: hidden;
This should allow your body to expand in height as needed.
c. You could assign an actual height in pixels, or em . Something like 700px should not go off the screen, but of course that would change if the user is mobile.
I have two divs, top div has style as follows:
.context_left {
float:left;
display:inline-block;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
}
while that the div below it has style:
.footer {
width:100%;
height:54px;
display:block;
position: absolute;
margin-top:80px;
left:0;
}
when the div context_left changes it's height the div footer remains at it's position, I want to move the footer div down if context_left div changes it's height. Can anyone please help me to do it?
Did you try to add this lign to your .footer
clear:both;
And delete
position: absolute;
You have set your footer with position: absolute;. That means your footer should be kinda fixed, but inheriting from its parent.
Try changing absolute to relative and see if that is what you want.
.footer {
width:100%;
height:54px;
display:block;
margin-top:80px;
left:0;
}
Removed the position: absoulte from footer. Try this. Because the footer will remain at the same position till position:absolute remains in style.
Css:
.context_left {
float:left;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
display:inline-block;
}
.footer {
width:100%;
height:54px;
display: block;
clear:both;
margin-top:80px;
left:0;
}
Working Fiddle: http://jsfiddle.net/dMawS/show
If a sticky footer at the bottom of the page is, what your looking for, then this can help you:
html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* the margin compensates the footer plus the footer's top margin */
margin: 0 0 134px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 54px;
}
The footer will always be at the bottom of the browser's viewport or below the content.
Demo
Try before buy
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:
footerWrap {
background-color:#000;
width: auto;
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;
}
The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!
update:
html {
padding:0;
height:100%;
width: 100%;
}
body{
margin: -1px 0 0 0;
background-color:#FFF;
font-family: calibri;
background-image:url(images/item9HeaderSideFiller.gif);
background-repeat: repeat-x;
padding:0;
height:100%;
width: 100%;
}
wrap {
width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000
px;
footerWrap {
background-color:#000;
position:absolute;
bottom:0;
width:100%
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
}
}
To fill the page
width:100%
To stay at the bottom of the page a solution could be
position:absolute;
bottom:0;
notice that in both body and html you have to set
padding:0
height:100%;
Try width:100% in footerWrap. Also, what do you mean by fixed on the bottom? Do you mean the footer should always be at the bottom of the screen, even when scrolling? Or do you mean it should always be at the bottom of the page?