Wrapper 100% de la hauteur, fixe le pied de page et le menu fixe

Je sais, ce sujet a été ouvert 1000 fois, mais je n'ai pas trouver une solution adaptée (ou une solution que j'ai pu comprendre).

J'ai une page simple (wordpress) avec un fixe nav menu sur la gauche, le contenu défilant dans le centre et un pied de page fixe (toujours visible).

J'ai 2 problèmes que j'ai essayé de résoudre dans tous les sens:

1) de l'emballage (100% de la hauteur) enveloppe ok jusqu'à ce que vous faites défiler la page, mais ne s'étend pas après le défilement (voir image jointe, la page défile vers le bas).

2) le contenu en bas, c'est sous le pied de page, je ne pouvais pas trouver un moyen d'appliquer un -30 rembourrage pour rendre lisible la dernière partie du contenu ( je pense que cela est lié au problème aucun.1).

Voici le CSS (également utilisé un reset.css basé sur YUI reset):

  /* LAYOUT */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
/* GENERAL LAYOUT */
html, body{
margin    : 0;
padding   : 0;
height    : 100%;
border    : none;
}
#wrapper{
min-height: 100%;
width: 100%;
background: red;
overflow: hidden;
}
#container{
width: 960px;
margin-left: 40px;
padding-bottom: 30px
}
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
}
#content{
position: absolute;
overflow: auto;
width: 420px;
margin-left: 220px;
}
li > a {
display: block;
}
a {outline: none;}
/* NAVIGATION */
h1.logo {
height: 155px;
}
#navigation ul{  
margin:0;  
padding:0;  
text-align: right;
}  
#navigation ul li{  
height:28px;  
display: inline-block;
color:#000;  
padding: 0 0 0 0;
overflow:hidden;  
line-height: 28px;
margin-bottom: 7px;
}  
#navigation li a{  
padding: 0 28px 0 0;
}  
.nav-blog{
width:190px;  
border-left-color: #d1bbe8;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-eventi{
width:190px;
border-left-color: #aa87a0;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-bio{
width:190px;
border-left-color: #e2b893;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-discography{
width:190px;
border-left-color: #365f68;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-photos{
width:190px;
border-left-color: #545768;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-videos{
width:190px;
border-left-color: #4b5668;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-contact{
width:190px;
border-left-color: #686055;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
/* ----------Active links----------- */
.home .nav-blog 
{
width: 150px;
}
/* POST */
#ilpost{
width: 420px;
margin: 0 0 18px 0;
}
.spaziovuoto{
height: 155px;
}
.type-blog{
border-top-color: #d1bbe8;
border-top-style: solid;
border-top-width: 12px;
}
#tempo{
height: 32px;
background: url('../images/flatback.png');
}
.iltitolo{
background-color: #edece6;
}
.ilcontenuto{
background-color: #edece6;
}
/* PLAYER */
#player{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
height: 30px;
background: #000;
color:#fff;
}

Et le code HTML:

(tête omis)

<body class="home blog"> 
<div id="wrapper"> 
<div id="container">            
<div id="navigation"> 
<h1 class="logo">Logo</h1> 
<ul> 
<li class="nav-blog "><a href="/">blog</li> 
<li class="nav-eventi sel"><a href="/">eventi</a></li> 
<li class="nav-bio sel"><a href="/">bio</a></li> 
<li class="nav-discography sel"><a href="/">discography</a></li> 
<li class="nav-photos sel"><a href="/">photos</a></li> 
<li class="nav-videos sel"><a href="/">videos</a></li> 
<li class="nav-contact sel"><a href="/">contact</a></li> 
</ul> 
</div><!-- .navigation --> 
<script type="text/javascript">  
jQuery(function($){
$.supersized({
//Background image
transition_speed : 50,
slides  :  [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]                   
});
});
</script> 
<div id="content"> 
<div class="spaziovuoto"></div> 
<!-- LOOOOOOOOOOOP --> 
<div id="ilpost" class="type-blog"> 
<div id="tempo"> 
Uncategorized //10 April, 2011</div><!-- .tempo --> 
<div class="ilcontenuto"> 
<p class="iltitolo">test post 4</p> 
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
</div><!-- .ilpost --> 
<div id="ilpost" class="type-blog"> 
<div id="tempo"> 
Uncategorized //10 April, 2011</div><!-- .tempo --> 
<div class="ilcontenuto"> 
<p class="iltitolo">test post 3</p> 
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
</div><!-- .ilpost --> 
<div id="ilpost" class="type-blog"> 
<div id="tempo"> 
Uncategorized //10 April, 2011</div><!-- .tempo --> 
<div class="ilcontenuto"> 
<p class="iltitolo">test post 2</p> 
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p> 
<p>&nbsp;</p> 
</div> 
</div><!-- .ilpost --> 
<div id="ilpost" class="type-blog"> 
<div id="tempo"> 
Uncategorized //10 April, 2011</div><!-- .tempo --> 
<div class="ilcontenuto"> 
<p class="iltitolo">Hello world!</p> 
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> 
</div> 
</div><!-- .ilpost --> 
</div><!-- .content --> 
<ul class="xoxo"> 
</ul> 
</div> <!--  container --> 
</div> <!--  E wrapper--> 
<div id="player">Player</div> 
</body> 
</html>

Juste au cas où, j'ai joint une image avec une explication.

Wrapper 100% de la hauteur, fixe le pied de page et le menu fixe

Merci pour votre aide!

InformationsquelleAutor Andycap | 2011-04-12