28172 sujets

CSS et mise en forme, CSS3

Hauteur de blocks à 100%

Hello,

J'ai un petit soucis de hauteur de blocks en CSS.

J'ai un contenant : <div id = "container">
J'ai un enfant "header" dans "container": <div id = "header">
Et un autre enfant "labels" dans "container" : <div id = "labels">

Container possède une propriété css "height:100%;", ainsi que "body, html"; Il fait donc 100% de la hauteur de la page.

Maintenant, Je voudrais que "labels" fasse 100% de la hauteur totale dans "container", mais qu'il soit positionné à 20px de marge sous header et 20px de marge inférieur.

Pour l'instant, si je met la propriété height:100% à "labels", il fait 100% de la hauteur de la page et dépasse par conséquent du navigateur. je veux qu'il n'occupe seulement la totalité restant entre le header et le bas du container.

Merci d'avance de votre aide
Cordialement
Salut,

C'est très bien de "raconter" ton code, mais tu pense pas que ça serait 10 fois plus efficace de donner l'intégralité de celui ci (html et css), et encore mieux, mettre un lien vers une page en ligne, car rares sont les gens qui visualisent une page web à partir du code, comme le font les navigateurs. Smiley cligne
Modifié par Mikachu (24 Sep 2009 - 14:51)
Salut,
Voici la source HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Une comptabilité qui évolue</title>
</head>
<body>
<div id="container">
  <div id="header"> <img src="data/logo.jpg" alt="logo"/> </div>
  <div id="labels">
    <div id=label_1 class="label" style="top:12%; left:27%;"> 
  <div id="titre_label_1" class="header"><h1>Etiquette 01</h1></div> 
  <div id="content_label_1"> <p>L'étiquette 01 est chargée </p></div> 

</div> 
<div id=label_2 class="label" style="top:10%; left:46%;"> 
  <div id="titre_label_2" class="header"><h1>Etiquette 02</h1></div> 
  <div id="content_label_2"> <p>L'étiquette 02 est chargée </p></div> 
</div> 
<div id=label_3 class="label" style="top:27%; left:23%;"> 
  <div id="titre_label_3" class="header"><h1>Etiquette 03</h1></div> 
  <div id="content_label_3"> <p>L'étiquette 03 est chargée </p></div> 
</div> 
  </div>
</div>

</body>
</html>


le CSS


@charset "utf-8";
/* CSS Document */

html, body
{
	height:100%;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#container{
	height:100%;
	background:#030;
}

#header
{
	display:block;
	width:100%;
}
#labels
{
	position:relative;
	display:block;
	border:1px dashed #FFF;
	margin:20px;
	height:50%;
	overflow:auto;
}
.label
{
	position:relative;
	border:1px solid #000;
	padding:5px;
	width:200px;
	background-color:#FFF;
}
.label .header
{
	cursor:move;
}

.label h1
{
	font-size:14px;
	padding:2px;
	margin:0px;
	background:#600;
	color:#FFF;
}


Merci d'avance encore une fois.
la page en ligne :
http://www.michaeljespersen.fr/mcs
Salut,

Je propose ceci :


#labels {
	position:absolute;
	top:220px;
	right:20px;
	bottom:20px;
	left:20px;
	overflow:auto;
	border:1px dashed #FFF;
}


et attention à :




<div id=[#red][b]"[/b][/#]label_1[#red][b]"[/b][/#] ...
<div id=[#red][b]"[/b][/#]label_2[#red][b]"[/b][/#] ...
etc..
Hello,

Merci beaucoup Smiley smile C'est ce que je cherchais.
Et oui, il faut que je corrige cette histoire de id ! C'est parce que c'est php qui génère mon HTML et à force d'avoir des :

"echo " guillemets ". $guillemets . "\"encore 1 pour la toure !\" "

Et bien je finis par me planter Smiley smile Mais il faut reconnaitre que c'est pratique et fantastique tout de même

Merci pour ta réponse Smiley cligne
Sujet clos
Aller à