There are many questions in SO regarding footer at bottom but I couldn't find a solution for this case.
I have this scenario:
(source: cucuza.com)
I want the Content div to expand to meet the top edge of the footer.
The footer must have sticky footer behavior: when the page height is less than the viewport, the footer has to be at the bottom of the viewport, and when the page height is longer than the viewport, the footer must stay at the bottom of the page.
While I was writing the question, I figured out the solution:
this is a live demo.
(source: cucuza.com)
and this is the code:
HTML:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
background:#ccc;
}
#wrapper {
min-height:100%;
position:relative;
width: 500px;
margin: 0 auto;
background:#fff;
}
#header {
background:#5ee;
}
#content {
padding-bottom:80px;
min-height:100%;
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
How it works:
The html and body keep expanded thanks to the height:100%
The min-height property in the #wrapper keeps it expanded to full height, and when the content is higher than 100% the #wrapper expands beyond the browser canvas (scroll).
The #wrapper has a relative position, so the absolute bottom position of the #footer keeps the footer always at the bottom of the #wrapper.
The #content padding-bottom property, having the same value than the #footer height, prevents #footer and #content overlapping, because the #footer will be always covering the bottom of #wrapper and would cover the #content if this one reaches the bottom of the #wrapper. You cannot put this property in the #wrapper, because the height would result bigger that 100% (100% + padding) and the #footer would fall outside the screen.
The #wrapper, and not the #content, has the background color property, since it is the one that is always fully expanded.
Related
i am trying to make my website, but i have problem with size of screen. I want to make it bit responsive, and my layout is - header on top, then menu and footer, but its on 25% of width, and i dont know how to resize it to 100% height.I want it look like this: http://s32.postimg.org/9pa325s3p/img.png
My Code:
<header>header </header>
<section id="menu">menu</section>
<footer>footer </footer>
css code is not important.
Try to use vh units there:
#menu {
height: calc(100vh - 80px);
}
Here's a solution that should work in pre-CSS3 browsers.
The menu and footer are inside a wrapper div. The wrapper div gets height:100% and starts at the top of the page using margin-top:-40px. The wrapper div gets position:relative so that all elements inside are positioned relative to this container element.
For the menu, we position absolutely with top:40px so we don't overlap the header, and bottom:40px so we stop before the footer.
Footer styles are obvious - position:absolute with bottom:0 so we hit the bottom of the page.
<style>
header {
height:40px;
background-color:yellow;
}
#menufootercontainer {
position:relative;
height:100%;
margin-top:-40px;
position:relative;
}
#menu {
width:80px;
position:absolute;
top:40px;
bottom:40px;
background-color:green;
}
footer {
width:80px;
height:40px;
position:absolute;
bottom:0;
background-color:red;
}
</style>
<header>header</header>
<div id="menufootercontainer">
<section id="menu">menu</section>
<footer>footer</footer>
</div>
The simplest thing you can do is wrap the section and footer elements in a 'wrapper' div, or any other block level element (aside, section, nav, etc.) you like, like this:
<div ID="sidebar-wrapper">
<header>header </header>
<section id="menu">menu</section>
<footer>footer </footer>
</div>
Once you do that, it's as simple as give the #sidebar-wrapper a height of 100% and width of 25%. And finally, give your menu and footer the desired heights as percentages.
#sidebar-wrapper {
width: 25%;
height: 100%;
}
section {
height: 90%;
}
footer {
height: 10%
}
Once that's done, your layout should be just as it is in the picture.
P.S: if you plan to have navigation links in that section element (which I imagine you do), you should use 'nav' instead to be more semantic :).
in CSS i made that code:
body {
background-color:#f3f3f3;
max-width:1920px;
min-width:1024px;
margin:0 auto;
but to seperate the header from the content i would like to have a "bar" between them.
so i made:
#zig {
max-width:100%;
background-image:url(../img/zig.png);
background-repeat:repeat-x;
height:25px;
but the Bar doesn't go "unlimited" it just repeat till it reaches "1920px" can i somehow change that? to put
min-width:100%
didn't work
max-width:1920px; /* REMOVE ME */
if you want something to be max-width 1920 than use a container child (of body) element.
what way you #zag DIV will spann the full width of html, body which is dictated by the viewport width.
If #zag is a DIV (and it's not position absolute or fixed) than you need to set only it's height. min-width:100% is not needed since it already spans the full available width - being a block-level element.
html,body{height:100%;}
body{margin:0; font:16px/1 sans-serif;}
header, section, footer{
display:block;
margin: 0 auto;
max-width: 400px; /* you use 1920. 400 is for demo :) */
background:#eee;
}
.zag{
height: 50px;
background:#0fb;
}
<header>HEADER</header>
<div class="zag">ZAG</div>
<section>SECTION</section>
<div class="zag">ZAG</div>
<footer>FOOTER</footer>
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.