28221 sujets

CSS et mise en forme, CSS3

[Résolu] Height 100% (Toujours à la rue la dessus)

Bonjour à tous,

Voila je passe en fin à la pratique, et je ne parviens vraiment pas à mettre en page un truc simple...

Je ne cherche qu’à faire en sorte que çà fonctionne dans Firefox pour l'instant.


J’ai besoin de trois blocs, 1 header de 69px de haut, un menu de 149px de large et 100% de haut et un content.

J'ai besoin que le background du menu remplisse la totalité de la hauteur de la page...

J'ai pour ce faire le code suivant :

HTML :


<div id="gabarit">
	<div id="header">
		<img src="/images/_header_logo.gif" alt="Représentation graphique du logo" width="362" height="69">
	</div>
	<div id="menu">
		Mise en place ici du menu
	</div>
	<div id="content"></div>
</div>


CSS

/* DEFAULT VALUES ----------------------------------------------*/
html, body {
	height:100%;
	width:100%;
}
body {
	margin:0;
	padding:0;
}

/* GABARIT -----------------------------------------------------*/
#gabarit {
	height:100%;
	width:100%;
}

/* HEADER ----------------------------------------------------- */
#header {
	height:69px;
	background-image:url(images/_backheader.gif);
}

/* MENU --------------------------------------------------------*/
#menu {
	width:149px;
	background-color:#E9818F;
}


Je pensais naïvement que le fait de mettre 100% de haut sur un bloc lui faisait prendre automatiquement la totalité de la hauteur restante après le header, mais :

1) Si il n'y à pas de contenu dans le menu, ben il ne se passe rien
2) Si il y a au moins un caractère le bloc fait 100% de la hauteur totale de la fenêtre du navigateur

Donc me fait apparaître une splendide scrollbar .... Smiley fache

J'ai un 4 éme bloc "gabarit" autour de l'ensemble car j'ai lu qu'il était nécessaire de fournir une référence afin de pouvoir déterminer sur quelle valeur calculer les 100% de haut...

Une idée ?
Modifié le 18 Nov 2004 - 14:03
Voici quelques indications pour réaliser la chose :
http://www.alistapart.com/articles/fauxcolumns/
http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css
(cette méthode ne sera pas satisfaisante sous IE)

Pour la premiere méthode, si tu n'es pas féru d'anglais, en gros tu fait une image de fond contenant le menu et le reste de la page que tu met dans un élément qui contient le menu et le contenu et tu le fais répéter verticalement.
c 'est de la bonne ruse de coyotte çà, mais çà n'est pas valide pour un design fluide.

Car l'image de fond à une largeur définit, alors que mon site non...

Smiley confused

j'ai que des idées à la noix, faut croire que ce truc et le seul à prendre vraiement la tête avec CSS.
En fait voila comment pour l'instant çà fonctionne :


/* DEFAULT VALUES ----------------------------------------------*/
html, body {
	height:100%;
	width:100%;
}
body {
	margin:0;
	padding:0;
}

/* GABARIT -----------------------------------------------------*/
#gabarit {
	width:100%;
	height:100%;
	background-image:url(images/_backmenu.gif);
	background-repeat:repeat-y;
}

/* HEADER ----------------------------------------------------- */
#header {
	height:69px;
	background-image:url(images/_backheader.gif);
}

/* MENU --------------------------------------------------------*/
#menu {
	width:149px;
}


Le fait effectivement de mettre en place une image de fond avec un repeat-y permet de palier au problème, car je n'ai qu'un menu...

Merci pour la piste..
Oui c'est vrai que ce genre de bidule prend pas mal la tête.
Mais tu as tout de même moyen de t'en sortir avec un truc fluide.

Tu fais une image de 1600 pixels de larges (1280 si tu penses pas que tes visiteurs auront 1600*... de resolution) avec une partie menu de 140px (je sais plus combien tu veux, enfin ce que tu veux), et le reste pour le contenu, et là il faut faire une image qui permette que ça fasse pas trop degueu au redimenssionement.

Si ton menu est à gauche, tu calle le background à gauche et si c'est à droite tu le calles à droite.
C'est glop, c'est dans ces moments la pleins de super conseils personnalisés que je me dis que si le forum disposait d'une fonction récolutionnaire du genre "je peux épinglé les sujet sur lesquels je souhaite revenir facilement" ce serait cool..

Du genre ouaaa c'est çà le truc, j'épingle et ensuite j'ai une petite liste des sujets que j'ai épinglé pour y revenir...

bon je suis hors sujet, mais çà serait bien cool quand même.

avec en plus une catégorie correcpondant à çà dans le moteur de recherche

Arf........; j'me calme..

merci à vous deux. Smiley biggrin
Administrateur
Personnellement, j'utilise une fonction méconnue de mon navigateur qui s'appelle "Bookmarks" (ou "Marque-Pages" dans FF1.0 fr) Smiley rolleyes
(nan pas de drapeaux bleus à la HFr/PPC ici, ton sujet ne va pas se retrouver en page 3 de la catégorie d'ici demain! Smiley cligne )
En effet mon problème ressemble au tiens
le voila :
a écrit :
j'ai déja une div globale qui contient 3div!
cette div globale fait 100% en hauteur
dedans j'ai 2 premières div qui se superposent et qui ont une hauteur fixe.
j'en ai ajouté une 3eme en dessous qui contiendra les différentes pages et celles ci j'aimerai qu'elle remplisse le reste de la hauteur de la fenetre.

Elle ne fait donc pas 100% de la hauteur, en fait elle fait 100% moins la hauteur des 2 autres div.


mais je n'ai pas compris cette histoire d'images de fond Smiley ohwell
En gros une image de fond faisant toute la largeur de ton site peut dans cetains cas sugérer l'existance d'une colone..

tu as suivi les liens du poste ?
oui mais dans mon cas je ne veux pas créer de colonne Smiley ohwell

mes div sont placées l'une en dessous de l'autre je n'ai donc que des lignes!
j'aimerai juste que la derniere ligne ai pour hauteur l'espace qu'il reste
@lollie

Je te suggère de créer un autre sujet parce que celui-ci a un tag [Résolu]. Ça augmenterait tes chances !
Sujet clos
Aller à