28172 sujets

CSS et mise en forme, CSS3

Mettre un fond de div sur la longueur de la page

Bonjour,

J'ai cherché mais j'ai pas trouvé la solution.
Sur le code ci-dessous, je veux que la Div#wrapper-content aura la couleur noire comme fond jusqu'au Footer même si le contenu est court tout en gardant le couleur blanche pour le fond du Div#wrapper (dans ce cas elle va être cachée par la couleur noire mais je veux avoir deux couleurs de fond différentes pour d'autres utilisations).

En résumé, comment mettre la Div#wrapper-content sur toute la page sans tenir compte de la longueur du contenu.

Merci.

NB: Ce code fonctionne parfaitement sur tous les navigateurs.

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<style type="text/css" media="screen">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
html {
	font-size: 100%;
}
body {
	font-size: .9em;
}
#wrapper {
	position: relative;
	width: 995px;
	margin: 0 auto;
	min-height: 100%;
	background-color: #FFFFFF;
	height: auto !important;
	height: 100%;
}
#wrapper-content {
	overflow: auto;
	background-color: #000000;
}
#header {
	margin-top: 0;
	height: 100px;
	background-color: #cc0000;
}
#navigation {
	height: 26px;
	background-color: #0000FF;
}
#column-1 {
	float: left;
	width: 195px;
	background-color: #66FF00;
}
#column-2 {
	float: left;
	width: 598px;
	background-color: #99CCCC;
}
#column-3 {
	float: left;
	width: 202px;
	background-color: #66FF00;
}
#vide {
	margin-bottom: 0;
	padding-bottom: 40px;
	visibility: hidden;
	width: 100%;
}
#footer {
	border-top: solid 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: royalblue;
}
</style>
<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	div#page {
		height: 100%;
	}
	</style>
<! endif -->
</head>
<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="navigation">navigation</div>
  <div id="wrapper-content">
    <div id="column-1">
      <p>left</p>
    </div>
    <div id="column-2">
      <p>corpo</p>
    </div>
    <div id="column-3">
      <p>right</p>
    </div>
  </div>
  <div id="vide">&nbsp;</div>
  <div id="footer">footer</div>
</div>
</body>
</html>

Modifié par wael (31 Jul 2008 - 17:01)
Bonjour,

Y a personne qui connait la solution de ce problème? ou la demande n'est pas claire?

Merci.
Bonjour,

wael a écrit :
ou la demande n'est pas claire?

Le code HTML et CSS d'une page n'aide pas particulièrement à visualiser un problème, surtout quand ta description parle de fonds blancs ou noirs que l'on ne voit pas. Une page en ligne serait plus efficace. Smiley cligne
salut,

si j'ai bien compris tu a la possibilité de gérer ça avec un body id non ?

<body id="black">


#black #wrapper
{
background:#000
}


c'est le plus simple a mon avis .
Là je comprends que je n'étais pas explicite.

Pour comprendre mon problème, il suffit de copier le code dans un fichier HTML. Il est complet comme code et structure.
Ensuite, il faut changer la propriété "background-color" sur le CSS du #wrapper et #wrapper-content, en changeant la couleur et la supprimant.

J'explique encore, mon site est dynamique (au fait, j'utilise liferay comme solution). Sur le #wrapper, le fond n'est pas important (il est blanc maintenant), seulement, sur le #wrapper-content çà change selon les sections du site donc je veux que çà se voit sur tout le reste de la page (càd tout mis à part le haut et le bas).

Donc, ce qui est important pour moi, comment définir le #wrapper-content sur toute la longueur de la #wrapper (donc de la page) comme çà, la couleur du background sera visible.

Merci pour votre aide.
Bonjour,

#wrapper-content ne peut pas prendre toute la hauteur de #wrapper, moins celle du header et celle du footer, pour deux raisons:
1. tu ne peux pas faire de soustractions en CSS (genre min-height: 100% - 166px);
2. si le parent n'a pas de hauteur fixe (et un min-height: 100% ne sera pas pris en compte ainsi), tu ne peux pas donner une hauteur en pourcentages à l'enfant.

Donc, ça ne marchera pas. Il va falloir te rabattre sur la couleur de fond de #wrapper (et je ne vois pas trop ce qui empêcherait de le faire ici... ou bien j'ai mal compris ta demande.
Sujet clos
Aller à