28173 sujets

CSS et mise en forme, CSS3

Position Absolute et Height 100%

Bonjour,

Je me retrouve avec le problème suivant : j'ai un div en position absolute qui se situe en bas de la page (top:2000px par exemple). Il est donc ateignable à l'aide de la scrollbar.
Ce div est contenu dans un autre div (#fond). Quand j'affecte une couleur de background à #fond, j'aimerai que cette couleur aille jusqu'au bas de la page, hors, elle ne va au pas au maximum (height:100%).

Je vous mets le code, c'est plus explicite :
CSS
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	background-color: #F0EDED;
	color: #000000;
	height:100%;
	border:1px solid red;
}
html {
	height: 100%;
	border:1px solid blue;
}


#fond {
border:1px solid green;
	margin:0 auto;
	padding:0;
	background-color:#F5F5F5;
	width:1000px;
	height: 100%;
	
}
#body {
	border:1px solid black;
	margin:0px;
	width:960px;
	min-height: 100%;
	position:relative;
	background-image:url(/img/bas_fond.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	
}


Code HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="all" type="text/css" href="index_fichiers/mariage.css" rel="stylesheet">
</head>
<body>
<div id="fond" ><div id="body">
<div class="article" style="position: absolute; top: 2405px; left: 159px; width: 618px; height: 325px;">
TEST<br>    
</div>
</div></div>
</body></html>


J'ai essayé avec min-height:100%, ca n'a pas marché non plus Smiley decu
Merci,
KaYa
Bonjour,
la couleur que tu utilises (F5F5F5) est très proche du blanc. Aussi on ne l'a remarque guère. Essaie déjà avec du rouge dans ton div de fond, du vert dans ton div #body et du bleu dans ta classe article. Tu verras déjà un peu plus clair ...
Bonjour Kaya et bienvenue sur ce forum. Smiley smile

Ta page n'a pas de Doctype ? Pour faire une page valide et interprétée (le plus possible) de la même manière d'un navigateur à l'autre, c'est indispensable. Smiley sweatdrop

Quand tu dis que tu veux que la couleur aille « jusqu'en bas de la page », cela signifie « jusqu'en bas de la hauteur de la fenêtre » ou « jusqu'en bas de tout le contenu, même en cas de défilement vertical » ? Parce que ça n'est pas la même chose.

Avec un bloc en height: 100%, si ton contenu fais plus d'un écran de haut, le boc s'arrêtera à la fin du premier écran.
Merci pour vos réponses !

En rouge, bleu ou jaune, ca ne marche toujours pas Smiley decu

Effectivement, ma page a bien un doc type, mais je ne l'ai pas mis pour simplifier. J'aimerai que la couleur aille jusqu'en bas de tout le contenu même en cas de défilement vertical !

Mon problème est bien que le height:100% ne concerne pas la longueur total de la page (défilement compris) mais juste la hauteur de la fenetre !
KaYa a écrit :
Mon problème est bien que le height:100% ne concerne pas la longueur total de la page (défilement compris) mais juste la hauteur de la fenetre !

Dans ce cas, l'utilisation de min-height plutôt que de height me semble indiquée... en faisant attention à ce que le contenu censé agrandir le bloc de fond ne sortent pas du flux (éléments positionnés en absolu, éléments flottants, etc.).
Le contenu censé agrandir le bloc de fond sort du flux, vu qu'il est en "absolute" ! Et avec un bloc en absolu, min-height ne fait rien de plus que height Smiley decu
KaYa a écrit :
Le contenu censé agrandir le bloc de fond sort du flux, vu qu'il est en "absolute" ! Et avec un bloc en absolu, min-height ne fait rien de plus que height Smiley decu

La solution est donc de ne pas abuser du positionnement absolu. Smiley smile

Sinon, à quoi correspond concrètement ce machin ?
<div class="article" style="position: absolute; top: 2405px; left: 159px; width: 618px; height: 325px;">
TEST<br> 
</div>

(au passage, placer le style de cet élément dans la feuille de style ne serait pas du luxe).

Comment est déterminée la mesure 2405px ? Est-elle fiable ? Peut-on s'assurer que le contenu qui précèdera ce bloc n'aura pas une taille variable (pas de contenu dynamique, et surtout pas de flot de texte dont la taille de caractère peut varier en fonction des préférences de l'utilisateur) ?
Modifié par mpop (18 Nov 2006 - 13:18)
Oui c'est fiable Smiley smile Tout les fils du bloc père sont en absolute, pas de contenu dynamique.

Ce que je ne comprend pas c'est que tout le fond, jusqu'à la fin de la page, a bien la couleur de fond. Donc il doit bien y avoir quelque chose qui lui indique jusqu'ou il faut que le navigateur affiche la couleur !
KaYa a écrit :
Oui c'est fiable Smiley smile Tout les fils du bloc père sont en absolute, pas de contenu dynamique.

Et donc pas le moindre contenu textuel susceptible d'être agrandi par l'utilisateur ?

KaYa a écrit :
Ce que je ne comprend pas c'est que tout le fond, jusqu'à la fin de la page, a bien la couleur de fond. Donc il doit bien y avoir quelque chose qui lui indique jusqu'ou il faut que le navigateur affiche la couleur !

Ben oui, le height ou min-height à 100% de la hauteur du parent (body, lui-même à 100% de html, lui-même à 100% de l'écran).

Par contre, tu as dû louper ma remarque qui disait : « La solution est donc de ne pas abuser du positionnement absolu. »
Et tout positionner en absolu, c'est un abus caractérisé, dont les conséquences ne devraient pas être surprenantes...
Bonjour,
sur quel navigateur travailles tu ? En effet les résultats sont différents sur IE ou FF. Sur IE, l'ensemble de la surface du document prend la couleur de fond. Sur FF, seule la partie qui contient du texte est teinte.
Sujet clos
Aller à