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> </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> </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> </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.
Merci pour votre aide!
Vous devez vous connecter pour publier un commentaire.
votre page n'a pas de contenu.. eh bien, il pense qu'il n'en est rien 😉
donc, supprimer le positionnement absolu à partir du contenu .. laissez le contenu reste dans le flux de ce qui devrait signifier que les
min-height
sur l'emballage est une chance de travailler (à la minute, il pense qu'il y a rien en elle de sorte qu'il ne peut pas se développer)qui apparaît alors à travailler, mais IE7 est un peu tatillon, comme il le fait et déplace le
nav
sur le contenu - alors explicitement (donner un tsk et), dites-lui où vous voulez qu'il soit (de l'aider à les compter!) et d'ajouter que la position la plus à gauche sur#navigation
Avez-vous essayé d'utiliser
min-height: 100%
au lieu deheight: 100%
sur votre corps et les styles html?Aussi loin que l'emballage, enlever les 100% de la hauteur. Il sera par défaut automatique de la hauteur et de développer le contenu.
Du contenu sous le pied de page que vous venez d'appliquer un fond de rembourrage pour le contenu, et de décoller le positionnement absolu. Il suffit de mettre une marge à gauche sur elle (et, éventuellement, d'un float).