Given the following HTML:
<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>
And the following CSS:
#wrapper {
min-height:100%;
position:relative;
}
* {margin:0;padding:0;height:100%;}
#header {
width:100%;
height:auto;
margin-top: 0;
}
#content {
width:100%;
height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
}
There is a gap between the content and the footer's div. How can I set that the content's height must be all the space between the header and the footer?
The footer has to have the 'absolute' position to position is at the bottom of the page.
Try using display:table, table-row options
display:table to #wrapper
display:table-row to #header, #content (width and height should be 100% here) and #footer
#wrapper {
min-height:100%;
position:relative;
display: table;
width:100%
}
#header {
width:100%;
height:auto;
margin-top: 0;
background:#dbfcd6; display: table-row;
}
#content {
width:100%; display:table-row; background:green; height:100%
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0; background:yellow;
display: table-row;
}
DEMO
It is because your footer has a bottom:0 and its position is absolute.This will make it stuck at the bottom.
You should give your content a min height-and max-height like this:
#content {
background-color:red;
width:100%;
min-height:450px;
max-height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
Then change the position of the footer to relative
Check out this fiddle : )Check me!
Related
I've a simple web page that contains a <div> on background (a green rectangle on background) and a second <div> that is the "body" it contains paragraphs, table etc
And on bottom I need to to put a simple footer containing juste copyrights and some socials networks buttons. The problem is : the footer is not on bottom, there is a space under the footer, how to avoid this please ?
See my simple code please
On jsfiddle is better (to see the space under the footer) see here please
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You forgot to remove default margin of body.
Set in css:
body {
margin: 0;
}
Fiddle
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin: -50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For best practice always set body and html 0 margin and 0 padding.
body,html{
margin:0;
padding:0;
}
Add this to .footer
margin-top:50px;
Perhaps you want to stick your footer to the bottom?
Clear the paddings and margins by:
html, body {
padding:0;
margin:0;
}
then
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position:absolute;
bottom:0;
}
Working fiddle
Set the min height of body to 100% and set position to absolute.
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position: absolute:
bottom: 0;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For that case you just need to set the margin and padding of body tag to 0.
body {
margin: 0;
padding: 0;
}
Or if your site have margins specified you can only set the bottom margin of body as.
body {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
Modify content css:
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
padding-top:100px;
}
footer{
width:100%;
height:65px;
margin-top: -65px;
background-color:red;
opacity:0.5;
position: absolute;
bottom: 0
}
body {
margin: 0;
min-height: 100%;
padding-bottom: 100px;
position: relative;
box-sizing: border-box;
}
html {
height: 100%;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You can fix footer at bottom by position: absolute;
Updated fiddle
Use position: absolute;bottom: 0; Style in footer class
footer
{
width: 100%;
height: 65px;
background-color: red;
opacity: 0.5;
position: absolute;
bottom: 0;
}
Click Here Live Demo
I'm having a small issue with my html layout .
When i have content - it works properly :
http://jsfiddle.net/exqofLft/
but when i have no content . the "wrap" height becomes 0 and the header and footer comes together.
e.g : http://jsfiddle.net/aqgo9370/
When there is no content or little content . i want the header at the top , followed by the full size wrap and the footer at the bottom of the page.
Any ideas how to do this ?
e.g :
CSS :
html, body
{
height:auto;
background-color:grey;
position:relative;
margin:0;
}
#header
{
position:absolute;
width:auto;
min-width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:auto;
min-width:100%;
height:auto;
background-color:blue;
margin:75px 0 0 0;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
}
By using vw/vh we can size elements to be relative to the size of the viewport. Add the below code in this id #wrap{}, Demo
min-height: 100vh;
You could use jquery for this.
var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();
$('#wrap').css({
'minHeight': (windowH - (headerH + footerH)) + 'px'
});
I made some changes in your html/css though.
Check the fiddle:
http://jsfiddle.net/skeurentjes/aqgo9370/9/
You can use box-sizing:border-box , and give it a padding to bottom , and top corresponding to footer and header respectively :
#header
{
top:0px;
position:relative;
width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:100%;
height:100%;
background-color:blue;
box-sizing: border-box;
padding-top: 75px;
padding-bottom:50px;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
bottom:0px;
}
Example
Js and position is not needed to Do this. Try this, This is Technically called Sticky footer
html, body {
height:100%;
background-color:grey;
margin:0;
}
#content {
float: left;
width: 100%;
min-height: 100%;
padding-bottom: 50px;;/*height of your footer*/
box-sizing: border-box;
}
#header {
width:100%;
height:75px;
background-color:yellow;
}
#wrap {
width:100%;
height:auto;
background-color:blue;
}
footer {
float: left;
width:100%;
height:50px;
background-color:black;
margin-top: -50px;/*height of your footer*/
}
<div id="content">
<div id ="header"></div>
<div id = "wrap"></div>
</div>
<footer></footer>
Use padding-bottom with desired height like
#wrap
{
padding-bottom:100%;/*or 50% or px value like 50px*/
}
html,
body {
height: auto;
background-color: grey;
position: relative;
margin: 0;
}
#header {
position: absolute;
width: auto;
min-width: 100%;
height: 75px;
background-color: yellow;
}
#wrap {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background-color: blue;
margin: 75px 0 0 0;
padding-bottom: 100%;
}
footer {
position: absolute;
width: auto;
min-width: 100%;
height: 50px;
background-color: black;
}
<div id="header">
<div>
<div id="wrap"></div>
<footer></footer>
It's working as it should. Elements always collapse to zero with no content. In order to achieve any height without content, you must assign a height value.
add Minimum height of wrap id
for example :
min-height:500px;
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
This question already has answers here:
CSS side by side div's auto equal widths
(5 answers)
Closed 8 years ago.
In my layout in the main part of site I need two flexible columns. The height is known and always the same. But the width should be auto-increases with the width of the browser.
I need this because in div#1 should be different content (float right I supposed) and background than in div#2 (float left I supposed). Whole layout is increasing their width with browser (width 100%).
It would be easy to make if the background of div 1 and 2 is the same (wrapper + background set on parent) but in this example backgrounds are different. I do not know how to auto-increase the width of these two divs.
adjust the width parameter of div#1 and div#2
div #header {
display: block;
position: absolute;
top: 0px;
height: 100px;
}
div #div1 {
display: block;
position: absolute;
top: 100px;
width: 50%;
left: 0px;
}
div #div2 {
display: block;
position: absolute;
top: 100px;
width: 50%;
right: 0px;
}
this is what you want:
<div class="container">
<div class="header">
This is header
</div>
</div>
<div class="container">
<div class="div1">
This is left div
</div>
<div class="div2">
This is right div
</div>
</div>
<div class="container">
<div class="footer">
This is footer
</div>
</div>
.container{
max-width:960px;
padding:0 15px;
height:auto;
position:relative;
clear:both;
}
.header{
position:relative;
height:100px;
background-color:yellow;
width:100%;
display:block;
}
.div1{
position:relative;
height:400px;
background-color:pink;
width:50%;
float:left;
}
.div2{
position:relative;
height:400px;
background-color:green;
width:50%;
float:left;
}
.footer{
position:relative;
height:100px;
background-color:cyan;
width:100%;
display:block;
}
I've created a jsfiddle demo
What about a good, simple, semantic layout? The below uses positioning to maintain a fixed footer, here is an example without
Demo Fiddle
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
background:green;
height:50px;
}
footer {
bottom:0;
}
section {
top:50px;
bottom:50px;
width:50%;
background:yellow;
overflow-x:auto;
}
section:last-of-type {
background:blue;
left:50%;
}
Try this
#container{
width:100%;
clear:both;
}
#header{
width:100%;
}
#div1{
height:400px;
width:50%;
float:left;
}
#div2{
height:400px;
width:50%;
float:right;
}
#footer{
width:100%;
}
For the last days I had some issues with a specific layout I want for a website. I have added an image to explain the layout and also some CSS code I have been trying out with below. I tried using floating layout, absolute positioning and all kinds of combinations to fix the layout but I can't seem to get it right. I hope any of you guys could help me out with this.
Here is the layout image:
Here is the CSS code:
html, body {
overflow:hidden;
}
* {
margin:0;
padding:0;
}
.header {
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper {
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left {
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right {
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
.footer {
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
Is this what you wanted? DEMO
REMOVE
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left
{
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right
{
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
REPLACE WITH
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y: scroll;
}
.left {
width: 30%;
}
.right {
width: 70%;
}
UPDATE DEMO
*
{
margin:0;
padding:0;
}
div.wrapper {
width: 100%;
min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y:scroll;
}
.left {
width: 30%;
background: red;
}
.right {
width: 70%;
background:green;
}
.header
{
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.footer
{
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
We eventually used flex-box layout to be able to use for example 300px and let the rest be fluid.