Help plz, centered 100% height page , whit 100% width sticky footer wont go 100%

HTML & CSS
1

Im curently building a new portefolio website and im having a problem when i scroll down the page.
The main div containing the content (#global) div wont take 100% of the page height when i scroll.

here is my website adress www.kmultim.com

Here is a screenshot of the problem.

It seems this problem does not appear in Google chome.
But it does in IE8 and 6,7 and also firefox(i use 7.0.1)

Plz help

HERE is MY CSS (it validate 2.0,2.1 and 3) at http://jigsaw.w3.org/css-validator/

 @charset "UTF-8";
* {
margin:0;
padding:0;
}
 
/* Hides from IE-mac \\*/
* html .clearfix {
height:1%;
}
 
a:link,a:visited {
background-color:transparent;
color:#039;
text-decoration:none;
}
 
a:hover,a:active {
background-color:transparent;
color:#06F;
text-decoration:underline;
}
 
body {
background:url(images/bgTexture.jpg) center top;
font:100%/1.4 Verdana,Arial,Helvetica,sans-serif;
color:#000;
background-repeat:repeat;
background-attachment:scroll;
margin:0;
padding:0;
}
 
div#superHeader {
background:url(images/header_sp.png) repeat-x;
}
 
html,body,#superHeader,body > #global {
height:100%;
}
 
/* ---------------------------------------------- ENTETE   --- */
div#global {
height:100%;
 
text-align:left;
width:954px;
background-color:#009;
background:url(images/contenuAc_brg.png) repeat-y;
color:#000;
margin:0 auto;
}
 
div#entete {
background:url(images/bgEntete.png) no-repeat transparent;
height:200px;
}
 
/* ---------------------------------------------- MENU */
div#menu {
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-size:18px;
height:40px;
padding-top:132px;
padding-left:50px;
}
 
div#menu ul {
display:inline;
list-style-type:none;
width:954px;
}
 
div#menu ul li a {
color:#3b3b3b;
font-weight:700;
padding-right:10px;
padding-left:10px;
text-decoration:none;
text-transform:capitalize;
height:100px;
background-color:transparent;
}
 
div#menu ul li a:hover,div#menu ul li a:active {
color:#100;
background-color:transparent;
}
 
div#menu ul li {
float:left;
padding-left:20px;
padding-right:20px;
}
 
.liactif {
background-color:#000;
height:25px;
color:#FFF;
}
 
.menuInactif {
padding-top:10px;
padding-bottom:10px;
}
 
/* ---------------------------------------------- CONTENU */
div#contenu {
clear:both;
color:#000;
font:100%/1.4 Verdana,Arial,Helvetica,sans-serif;
margin-left:40px;
margin-right:40px;
}
 
div#portImgs {
clear:both;
color:#000;
font:100%/1.4 Verdana,Arial,Helvetica,sans-serif;
height:100px;
}
 
div#bgrPortefolio {
clear:both;
color:#000;
font:100%/1.4 Verdana,Arial,Helvetica,sans-serif;
height:630px;
background:url(images/bgTv.jpg);
}
 
/* ---------------------------------------------- FORMULAIRE */
form p {
width:500px;
padding-top:15px;
padding-bottom:15px;
padding-left:30px;
}
 
div#divForm {
width:500px;
font-size:18px;
}
 
form {
padding-top:15px;
background-image:url(images/menu_select.png);
background-repeat:repeat;
}
 
ol {
list-style-type:none;
width:480px;
padding-left:10px;
padding-bottom:10px;
}
 
ol li {
list-style-type:none;
background-color:#CCC;
margin-bottom:1px;
color:#000;
}
 
label {
clear:left;
display:block;
float:left;
padding-right:10px;
text-align:right;
width:100px;
height:24px;
margin-top:10px;
margin-bottom:5px;
}
 
input {
width:200px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
background:url(images/bgrInput.png) transparent no-repeat;
border:none;
margin-top:5px;
padding-left:10px;
color:#000;
}
 
input:focus {
border:none;
background:url(images/bgrInput_focus.png) transparent no-repeat;
outline:none;
color:#000;
}
 
textarea {
margin-top:5px;
margin-bottom:5px;
border:2px solid #777;
}
 
button {
margin-left:40px;
}
 
/* ------------------------------------------------------------ 
 
/* End hide from IE-mac 
 ---------------------------------------------- PIED de PAGE */
div#footer {
width:100%;
height:50px;
color:#FFF;
text-align:center;
font:12px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background:#000 url(images/footer_texture.png) repeat;
position:fixed;
bottom:0;
left:0;
right:0;
}
 
div#footer a {
color:#FFF;
cursor:pointer;
font-weight:700;
white-space:nowrap;
text-transform:capitalize;
font:12px Tahoma,Verdana,Arial,Helvetica,sans-serif;
margin-top:5px;
background-color:transparent;
}
 
div#footer li {
padding-left:10px;
}
 
div#footer span {
color:#000001;
letter-spacing:5px;
}
 
div#footer ul {
list-style:none;
display:inline;
text-align:center;
margin:0;
padding:0;
}
 
.blanc {
color:#fff;
}
 
/* Section Portefolio  */
img {
border:none;
}
 
/*
#leftcol{
 width:200px; 
 float:left; 
 position:relative; 
 background-color:#FF9090; 
 }
 
#maincol{
 background-color: #FF39FF;  
 position: relative; 
 width:674px;
 float:right; 
 }
 
 */
.footer100 {
width:100%;
padding-bottom:5px;
padding-top:5px;
}
 
div#contenu p {
padding-bottom:15px;
padding-top:5px;
width:700px;
margin:0;
}
 
/* must be same height as the footer 
 CLEAR FIX*/
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
 
.lienOption {
margin-left:100px;
}
 
span,.clearfix {
display:block;
}

Thank you very mutch for reading.
I hope my english is understanable since its not my main language. :slight_smile:

2

Sticky footers are not easy to do well. I’m not actually sure how to fix your problem in this situation, as things are complicated by the footer. But using position: fixed will cause problems in various media, including iPhone, so there are more bulletproof approaches anyway.

I recommend that you read through this post on sticky footers and check that you’d built your page according to its guidance:

Hope that helps!

3

Thank you very mutch , indeed fixed cause some problem.

I tried with absolute but it was breaking in IE7-8

Ill try your link and if it dosent work then I guess i’Ll have no choise but to fix things with jquery. :slight_smile: