28173 sujets

CSS et mise en forme, CSS3

Height 100% pour un div dans un body qui est en height 100%

Bonjour,

Je m'explique :

J'ai un gabarit en positionnement absolu.
Je souhaite que le div ait une taille de 100% pour lui appliquer une couleur de fond.

si je fais



body{height:100%;}
div{height:100%}


ça marche, mais... uniquement pour la fenêtre du navigateur.

J'aimerais que ça prenne 100% de la page, il ya une possibilité de faire ça ?

Merci
Modifié par EricLB (08 Dec 2006 - 15:02)
Administrateur
EricLB a écrit :

ça marche, mais... uniquement pour la fenêtre du navigateur.

J'aimerais que ça prenne 100% de la page, il ya une possibilité de faire ça ?

Merci

Hello,

En effet : http://forum.alsacreations.com/faq/#item57

a écrit :
Note (bis) : le Web n'étant pas un média paginé contrairement au média d'impression, il ne sera pas possible de "restreindre" un affichage à 100% tout en rajoutant du contenu (hormis utilisation de la propriété "overflow"). C'est au concepteur d'adapter ses besoins au média et non l'inverse.


Heureusement que de nouveaux tutos sont apparus récemment en ce sens Smiley cligne
EricLB a écrit :

Je souhaite que le div ait une taille de 100%


De quel genre de div parles tu ?

S'agit il d'un div "global" enfant direct de body et comprenant tout le reste du balisage ? Auquel cas la solution c'est min-height:100%; + solution adaptée pour IE inférieur à 7.

Mais s'agit il bien de ça ?
Modifié par clb56 (07 Dec 2006 - 15:04)
Raphael a écrit :

Hello,

En effet : http://forum.alsacreations.com/faq/#item57

Note (bis) : le Web n'étant pas un média paginé contrairement au média d'impression, il ne sera pas possible de "restreindre" un affichage à 100% tout en rajoutant du contenu (hormis utilisation de la propriété "overflow"). C'est au concepteur d'adapter ses besoins au média et non l'inverse.


Heureusement que de nouveaux tutos sont apparus récemment en ce sens Smiley cligne


Donc si j'ai bien compris il faut mettre 100% à la fois à <html> et <body> et pas seulement à <body>.

Très bien ce tuto, c'est exactement ce qu'"il me faut Smiley smile
Modifié par EricLB (08 Dec 2006 - 00:34)
Je comprend pas bien ta question.
Ton body de toute maniaire il fait 100% toute ta fenetre, tu n'as pas à lui dire qu'il fasse 100%

pour qu'il est une couleur de fond qui prenne tout la zone de ta page web :

<style>
body {background-color:#00FF00}
</style>

Si j'ai bien compris le sens de ta question, y as rien de bien compliquer à tout sa...
La question n'est pas là.
Tu mets u fond à ton body pas de pb.

La question est de faire en sorte qu'un div conteneur (positionné en absolu) dans ton body fasse 100% de hauteur même si le contenu ne fait pas 100% de ton div.
clb56 ta donné un solution.
à ton conteneur tu lui met :

.conteneur {min-height:100%}
ou bien
.conteneurn {height:100%}

Pour ie 7 j'ai lus quelque par que c'etais encore une version beta, et que donc il ne fallais pas ce prendre la tête sur le developement css de nos site, vue qu'il risquais de tout changer.
Pirus a écrit :
clb56 ta donné un solution.
à ton conteneur tu lui met :

.conteneur {min-height:100%}
ou bien
.conteneurn {height:100%}

Pour ie 7 j'ai lus quelque par que c'etais encore une version beta, et que donc il ne fallais pas ce prendre la tête sur le developement css de nos site, vue qu'il risquais de tout changer.


Ce que m'a donné clb56, n'est pas une solution, puisqu'il me propose de mettre ce que j'ai déjà mis, si tu lis mon post du début... (entre-temps j'ai parcouru le tuto et je comprends mieux ce que tu as voulu dire clb56 Smiley cligne

La version d'IE7 actuellement en téléchargement n'est pas une version béta, je ne sais pas où tu es allé chercher ça.

Même si s'en était une je pense pas que je pourrais dire à mon client :

"Ecoutez, IE7 c'est une version beta, alors on va pas se prendre la tête, et même si le site déconne un peu, on verra ça à la prochaine version"

Autrement si tu veux essayer de comprendre le problème, tu mets 100% de hauteur à ton élément body, 100% de hauteur à ton élément div conteneur tu mets une couleur de fond différent à chaque élément et tu verras en redimensionnantla fenêtre de ton navigateur pour avoir un scroll , que le 100% ne s'applique pas à l'ensemble de ta page, mais à la partie visible dans la fenêtre de ton navigateur.
Modifié par EricLB (08 Dec 2006 - 00:38)
Modérateur
bonsoir,

c'est tout betement cette histoire de style en cascade ...


Les enfants herite des valeurs des parents ou plutot prennent en references les valeurs applicables

Alors en raccourcie : 100% de rien du tout est egale a 0.

En donnant 100% a html , la reference de base devient la fenetre du navigateur (partie qui affiche la page et pas de l'application , dans certains navigateurs et certains cas (dtd ou pas ) des bugs apparaissent , ecran prit comme reference ou taille de la fenetre de l'application)...

ensuite en repassant la reference a body avec a nouveau un 100% , on peut des lors appliquée des dimensions en pourcentage a ses enfants directe.

Sitot qu'une descendance ne reçoit plus d'indication de hauteurs , il n'est plus possible de faire usage du height:xx%; sans se heurter a des difficultées ,

Idem pour ce qui est des largeurs

++
Jai essayé en mettant

html, body{height:100%}
div#conteneur{min-height:100%} (height:100% pour IE)

Mais ça ne marche pas, ça continue à ne prendre que la taille de la fenêtre du navigateur.
gcyrillus a écrit :


En donnant 100% a html , la reference de base devient la fenetre du navigateur (partie qui affiche la page et pas de l'application , dans certains navigateurs et certains cas (dtd ou pas ) des bugs apparaissent , ecran prit comme reference ou taille de la fenetre de l'application)...



Justement, tout le problème est là, la référence c'est la fenêtre du navigateur, donc la partie visible de la page et pas la page en elle même.
Le fond est appliqué à la partie visible du div conteneur.

Comment faire pour que ça s'applique à la page ?
Salut.

Pirus a écrit :
Je comprend pas bien ta question.
Ton body de toute maniaire il fait 100% toute ta fenetre, tu n'as pas à lui dire qu'il fasse 100%

pour qu'il est une couleur de fond qui prenne tout la zone de ta page web :

<style>
body {background-color:#00FF00}
</style>

Si j'ai bien compris le sens de ta question, y as rien de bien compliquer à tout sa...


ça marchera seulement si le contenu n'est pas assez long pour remplir la fenêtre du navigateur (autrement dit, ce ne sera jamais suffisant). Il faut utiliser min-height pour que le div continue à s'allonger en dessous du premier "écran" de la page. Au passage, pirus, merci de baliser ton code comme demandé dans les règles du forum.

@EricLB : tu en es où, au niveau du code ? je suis un peu perdu dans les exemples & contre-exemples Smiley cligne

En principe, avec 
html, body {
   height: 100%;
}
#global {
   min-height: 100%;
}
ça doit passer au moins pour firefox & Opera ?
Non ça ne passe pas, mais pour mieux vous en rendre compte je vous invite à aller voir la page sur :

Test height

J'ai mis le background en rouge pour que ce soit plus flagrant.

Les deux div conteneur sont en absolute, j'ai également essayé en float, pas plus de résultat.

Si vous avez une solution, n'hésitez pas à m'en faire part

(si vous n'êtes pas en 1024*768, redimensionnez la fenêtre pour voir le résultat).

Merci
C'est le positionnement absolu qui doit poser problème, dans ce cas.

Personnellement, j'aurais fait comme ceci : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
h1 {
	margin-top: 0;
	}
#global {
	min-height: 100%;
	position: relative;
	margin: 0 auto;
	width: 500px;
	background: #c00;
}
#menu li {
	display: inline;
}
#img_droite {
	position: absolute;
	left: -115px;
	top: 100px;
	border: 1px solid #000;
	}
#recherche {
	float: right;
	}
#col1, #col2 {
	clear: right;
	float: left;
	width: 170px;
	}
#col1 {
	margin-left: 130px;
	}
#footer {
	clear: both;
	}
</style>

</head>

<body>

<div id="global">
	<img id="img_droite" src="" width="230" height="230" />
	<h1>Titre de la page</h1>
	<form>
		<p id="recherche"><input type="text" name="search" /></p>
	</form>
	<ul id="menu">
		<li><a href="page1.html" title="lien vers la page 1">page 1</a></li>
		<li><a href="page2.html" title="lien vers la page 2">page 2</a></li>
		<li><a href="page3.html" title="lien vers la page 1">page 3</a></li>
	</ul>
	<div id="col1">
		<h2>Colonne de contenu 1</h2>
		<p>Lorem ipsum et tout le tralala ...</p>
	</div>
	<div id="col2">
		<h2>Colonne de contenu 2</h2>
		<p>Rebelotte, évidemment</p>
	</div>
	<div id="footer">
		Pied de page
	</div>
</div>
</body>
</html>
J'ai essayé également en mettant un "position:relative", mais ça ne change rien... C'est toujours le même problème.
up !!!

J'aimerais aussi avoir un calque en position:absolute; qui prenne toute la hauteur de la page et non pas de la fenêtre mais je n'y arrive pas... Smiley bawling
Sujet clos
Aller à