height 100% de la page

djp1988 · 25 Octobre 2008

Bonjour, j'ai un soucis. j'ai un div qui a une image de fond en repeat-y d'un petit ombre qui donne une effet sympas sur la page, cependant, si j'ai pas de quoi remplir la page visible, l'image de fond s'arrete en plein milieu de la page ! (La ou le contenu se termine) donc j'ai chercher une solution et on m'a dit de donner a body et html height:100% ensuite de donner mon div concerner la meme attribut, et bingo ca marche bien, sauf que....

en faite non, on se rend compte lorsqu'on a tellement de contenu que on doit utiliser la barre de difilement pour descendre la page, et a ce moment on se rend compte que le height:100% voulais dire en faite, 100 % de la page visible au chargement, donc quand je défile vers le bas, on voit que l'image de fond ne continu pas comme voulu, que faire?

Merci

**yuston** · 25 Octobre 2008

Salut,

je n'ai pas tout bien saisi la partie des balises body et html, mais moi, ce que j'aurai fait c'est de mettre un min-height: 100%; à ton div. Cela ne marche pas?

djp1988 · 25 Octobre 2008

Merci, j'igniorais l'existance de min-height, merci encore, mon histoire de height c'était de donenr une height:100% au div qui avait l'image a répéter, mais ce height n'est appliquer que si son parent a un attribut height aussi donc il fallait donner a html et body height:100% et ensuite mettre height:100% au div avec l'image, mais ca marchais pas lorsqu'on voulais défiler la page vers le bas

djp1988 · 25 Octobre 2008

Non attends ca marche pas, voici mon code:

<html>
<head>
<style type="text/css">
html, body {
	margin:0;
	background-color:#ccc;
	height:100%;
	}
#pageL {
	width:900px;
	margin:0px auto;
	background:url(bg.png) left repeat-y;
	}
#pageR {
	width:900px;
	margin:0px auto;
	background:url(bgr.png) right repeat-y;
	}
#whitebackground {
	background-color:#fff;
	border-left:solid 1px #666;
	border-right:solid 1px #666;
	width:888px;
	margin:0px auto;
	}
#content {
	width:870px;
	margin-left:10px;
	}
</style>
</head>

<body>

<div id="pageL">
<div id="pageR">
<div id="whitebackground">
<div id="content">
Contenu<br />Contenu<br />Contenu<br />
Contenu<br />Contenu<br />Contenu<br />
Contenu<br />Contenu<br />Contenu<br />
Contenu<br />Contenu<br />Contenu<br />
Contenu<br />Contenu<br />Contenu<br />


</div>
</div>
</div>
</div>

</body>
</html>

Si j'ajoute min-height:100% à #pageL le petit image (6 x 5 pixels) se répete bien jusqu'en bas, mais si je l'ajoute egalement à #pageR (pour avoir le meme effet avec le deuxieme image d'ombre de la meme taille), ca ne marche pas pur lui mais l'effet est maintenu pour #pageL, voila, essayez aussi de mettre que height:100 % pour #pageL et #pageR et ca marche bien, sauf quand le contenu est trop et qu'on doit défiler la page, dans ce cas on voit que la hauteur 100 % a ete une hauteur fixe à la hauteur de la fenetre...

**yuston** · 26 Octobre 2008

Salut,

il faut avant tout préciser le doctype

Bref, j'ai jeté un oeil à ton code, je pense qu'il y a moyen de le faire plus facilement mais j'ai testé un peu et je pense être arrivé à ce que tu t'attends:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	html, body{
		margin:0;
		padding:0;
		background-color:#ccc;
		min-height: 100%;
	}

	#pageL{
		width:900px;
		min-height: 100%;
		margin:0px auto;
		background:url(bg.png) left repeat-y;
	}

	#pageR{
		width:900px;
		min-height: 100%;
		margin:0px auto;
		background:url(bgr.png) right repeat-y;
	}

	#whitebackground{
		background-color:#fff;
		border-left:solid 1px #666;
		min-height: 100%;
		border-right:solid 1px #666;
		width:888px;
		margin:0px auto;
	}

	#content{
		width:870px;
		margin-left:10px;
	}
	</style>
</head>

<body>

<div id="pageL">
	<div id="pageR">
		<div id="whitebackground">
			<div id="content">
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
				Contenu<br />Contenu<br />Contenu<br />
			</div>
		</div>
	</div>
</div>

</body>
</html>

Je n'ai pas testé sur les autres navigateurs autres que Firefox 3.0.X, donc je ne pourrai pas te dire si tout marche bien.

Conseils d'optimisation:

Ce que j'aurai fait personnellement c'est un seul div avec comme fond une image de 900 pixels de largeur et 1 pixel d'hauteur. Y aura juste les bords qui auront une ombre. Ensuite c'est de jouer avec les padding pour placer le texte/contenu.

djp1988 · 26 Octobre 2008

Salut, ce que tu as coder marche pour la moitié, quand le contenu rentre sur une page, je souhaite que l'image de fond aille quand meme jusqu'en bas.... :s

**yuston** · 26 Octobre 2008

Hummmm quelle image de fond? bg.png et bgr.png? Je ne comprends pas bien, chez moi, même sur IE6, ces deux images vont jusqu'en bas de la page.

Sur quel navigateur testes-tu tout ça? Bon en même temps c'est pas vraiment le problème, un site est censé s'afficher correctement partout... donc je crains ne pas avoir compris le problème.

djp1988 · 26 Octobre 2008

oui alors si le contenu déborde de la page, les images arrivent jusqu'en bas, mais si j'enleve du contenu, pour on va dire donner que 2 lignes sur la page, et bien les images arrives jusqu'en bas des lignes et pas jusqu'en bas de la page, en tout cas j'ai réussi mon probleme avec 1 seul image mais si à l'origine je n'avais pas fit cela c'est parceque je voulais laisser flexible l'option de grandir ou diminuer la dimension de la zone, un peu comme un sliding doors pour ne pas devoir creer des image de fond de different largeur selon mon choix de presentation, en faite le probleme est dans l'héritance de min-height, il semble que on puisse mettre min-height:100% lorsque le parent a un height:100% mais une fois que on a utiliser min-height: 100% les child les enfants de ce div ne peuvent pas comprendre min-height:100%

La je test sous safari FF3 et opera 9

**iNCiTE Web** · 26 Octobre 2008

Ne pas oublier le gros gros % d'utilisateurs d'Internet Explorer... souvent tout fonctionne nickel avec les autres, et IE7 et pire IE6 change tout...

Il n'y a pas une adresse de test ?

Connexion

height 100% de la page

Sujets conseillés

djp1988

yuston

djp1988

djp1988

yuston

djp1988

yuston

djp1988

iNCiTE Web

Veuillez vous connecter pour commenter

Parcourir

Activité