J'ai une barre de navigation sur le côté gauche de ma page, et je veux qu'elle s'étende à 100% de la hauteur de la page. Pas seulement la hauteur de la fenêtre d'affichage, mais aussi les zones cachées jusqu'à ce que vous fassiez défiler la page. Je ne veux pas utiliser le javascript pour y parvenir.
Peut-on le faire en HTML/CSS ?
Voici la solution que j'ai finalement trouvée en utilisant un div comme conteneur pour un arrière-plan dynamique.
z-index pour des utilisations non liées à l'historique.left o right pour une colonne pleine hauteur.top o bottom pour une rangée pleine largeur.EDIT 1 : Le CSS ci-dessous a été modifié car il ne s'affichait pas correctement dans FF et Chrome. déplacé position:relative pour être sur le HTML et définir le corps à height:100% au lieu de min-height:100% .
EDIT 2 : Ajout de commentaires supplémentaires aux CSS. Ajouté quelques instructions supplémentaires ci-dessus.
Le CSS :
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}Le html :
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Pourquoi ?
html{min-height:100%;position:relative;}Sans cela, le DIV du conteneur de nuage est retiré du contexte de mise en page du HTML. position: relative garantit que le DIV reste à l'intérieur de la boîte HTML lorsqu'il est dessiné, de sorte que bottom:0 fait référence au bas de la boîte HTML. Vous pouvez également utiliser height:100% sur le conteneur-nuage, car il fait désormais référence à la hauteur de la balise HTML et non plus à la fenêtre d'affichage.
C'est génial, mais il ne se centre pas. Y a-t-il une solution ? margin:0 auto ; ne fonctionne pas.
Une réponse géniale. J'ai remarqué qu'il faut utiliser min-height (et pas seulement height) sur le fichier html élément cependant. Pourquoi ça ?
Utilisation de height dit "vous avez cette hauteur, ni plus ni moins". Ce qui signifie que la hauteur sera celle de la fenêtre d'affichage. Nous voulons qu'il soit au moins aussi haut que la fenêtre d'affichage ou plus haut. min-height fait cela très bien.
J'ai eu un problème similaire et la solution a été de faire ceci :
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Je voulais un div centré sur la page avec une hauteur de 100% de la hauteur de la page, donc ma solution totale était :
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}Vous pouvez avoir besoin de faire en sorte qu'un élément parent (ou simplement 'body') ait position: relative;
C'est un beau morceau ! Ignorer la fixation de la hauteur est une idée brillante en fait et je n'ai pas encore remarqué de bug avec elle. Je l'adore. KISS ! Merci pour l'astuce !
Vous pouvez tricher en utilisant Fausses Colonnes Ou vous pouvez utiliser Astuces CSS
Notez cependant que les astuces css vous permettront d'obtenir des colonnes de hauteur égale, mais pas des colonnes de hauteur 100%.
Si la barre de navigation s'étend à la hauteur du contenu, qui détermine la hauteur de la page, vous obtiendrez une hauteur de 100 %.
-1 pour ne pas avoir fourni un moyen 100% sécurisé de s'assurer que la barre de navigation est toujours suffisamment haute.
Utiliser la position absolue. Notez que ce n'est pas la façon dont nous avons généralement l'habitude d'utiliser la position absolue qui nécessite de disposer les choses manuellement ou d'avoir des dialogues flottants. Cette méthode s'étire automatiquement lorsque vous redimensionnez la fenêtre ou le contenu. Je crois que cela nécessite le mode standard, mais cela fonctionnera dans IE6 et les versions ultérieures.
Remplacez simplement le div avec l'id 'thecontent' par votre contenu (la hauteur spécifiée ici est juste pour l'illustration, vous n'avez pas besoin de spécifier une hauteur sur le contenu réel.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>La div extérieure sert de point de référence à la barre de navigation. La div externe est étirée par le contenu de la div 'content'. La barre de navigation utilise le positionnement absolu pour s'étirer à la hauteur de son parent. Pour l'alignement horizontal, la division "content" est décalée de la même largeur que la barre de navigation.
Le modèle de boîte flexible CSS3 facilite grandement cette tâche, mais il n'est pas encore disponible dans IE et présente certaines de ses propres bizarreries.
C'est simple, il suffit d'utiliser un tableau :
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>Lorsque le DIV a été introduit, les gens avaient tellement peur des tables que le pauvre DIV est devenu le marteau métaphorique.
Bien que les DIVs et les styles fluides soient formidables, je pense que les CSS ne parviennent toujours pas à capturer l'essence de la mise en page de l'écran de la même manière que TABLE atteint l'essence de la mise en page du tableau. ...Et la disposition en tableau reste une façon acceptable de faire les choses.
Les tableaux sont destinés aux données tabulaires, pas à la mise en page. Cela dit, les CSS présentent des lacunes importantes lorsqu'il s'agit de répondre à la sempiternelle question de la hauteur de 100 %. Je dois admettre que j'ai déjà utilisé cette solution dans des délais serrés, mais j'ai toujours eu l'impression d'abandonner.
@Scott : J'ai déjà perdu trois semaines à essayer d'obtenir un design à 100% de hauteur dans les trois principaux navigateurs. Je ne peux vraiment plus entendre les conneries du genre "les tables sont diaboliques" :-( Même avec mes connaissances, utiliser des DIVs est bien trop compliqué.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
