Aller au contenu

height 100% de la page

djp1988

Par djp1988
dans (X)HTML et CSS

 Partager

Sujets conseillés

djp1988

djp1988

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
yuston

yuston

Posté
Posté

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?

Lien vers le commentaire
Partager sur d’autres sites
djp1988

djp1988

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
djp1988

djp1988

Posté
  • Auteur
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites
yuston

yuston

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
yuston

yuston

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
djp1988

djp1988

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...