Hauteur de bloc DIV

Commmint · 6 Février 2005

Bonsoir à tous !!!

Je me mets lentement mais surement au XHTML/CSS, mais un truc me défrise:


<!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=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.layout {
	background-color: #FFCC00;
	height: 300px;
	width: 600px;
}
.gauche {
	background-color: #FFFF66;
	width: 200px;
	text-align:center;
	float: left;
	margin-right: 10px;
}
-->
</style>
</head>

<body>
<div class="layout">
<div class="gauche">
  <p>mais va jusqu'en bas !!!</p>
  <p>mais</p>
  <p>si celui ci</p>
  <p>descend</p>
  <p>je veux que</p>
  <p>le div conteneur</p>
  <p>descende</p>
  <p>aussi</p>
  <p>et l'autre</p>
  <p>colonne</p>
  <p>reste à 100%</p>
</div>
<div class="gauche">mais va jusqu'en bas !!!</div>
</div>
</body>
</html>

Je souhaite :

1) que mon conteneur occupe 100% de la hauteur du navigateur

2) que les deux colonnes occupent 100% de la hauteur du conteneur

3) que la modification de la hauteur d'une colonne (par du contenu texte) oblige le conteneur à augmenter

N'y a t'il pas moyen de cumuler une hauteur par défaut et une capacité d'augmentation ? Je cherche du côté des min/max-height et de la valeur inherit, mais rien n'y fait !!!

Merci d'avance :unsure:

**Ernestine** · 6 Février 2005

Salut Commint,

J'ai aussi souvent galéré avec ces hauteurs divs à 100%, et le problème a été plusieurs fois soulevé sur le forum, avec des solutions données au cas par cas Quand on fixe une hauteur à 100%, c'est 100% de l'écran du navigateur... Tu devras donc trouver, selon moi (je ne suis pas une spécialiste !) une autre méthode.

A+

Ernestine

Modifié 6 Février 2005 par Ernestine

**thick** · 6 Février 2005

Bonsoir Commmint,

Est-ce quelque chose comme ça que tu cherches ?

http://www.alsacreations.com/articles/modeles/g_fluide.htm

Monique · 6 Février 2005

Bonjour,

Je ne résiste pas à vous livrer ce bel exemple proposé par Fabrice Bonny sur la liste des Pompeurs :

<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
body{
background-color:white;
color:black;
margin:0;
padding:0;
}
#table{
display:table;
background-color:yellow;
color:black;
width:75%;
margin:1em auto;
padding:0;
}
#gauche{
display:table-cell;
background-color:#666;
color:white;
width:20%;
height:100%;
margin:0;
padding:1em;
}
#droite{
display:table-cell;
background-color:orange;
color:#333;
width:80%;
height:100%;
margin:0;
padding:1em;
}
-->
  </style>
</head>
<body>
<div id="table">
<div id="gauche">
<p>Phirh est. Itaspa rheth da ulupreus vonuvat. Cripiva rotuer, smoscr
udicron hal ronadrem ibrarhant. Naquad getit inorhas, fig stap
dredophit detrant. Spobr psimipsus astupranis, sno lepr dilusnam
tafatis. Larhus nu al oducrue vi pagotum est. Uspap stivupleus, agacr
mofadrit el nomares ubrusnotis. Eprid labebes on olinam nopro. Snovisni
in tacutum utifat. Otarh scrasp osolit pre upedotis po cinont. Snoh
est. Metischore oprip rhi rharen ifecruer. </p>
</div>
<div id="droite">
<h1>El Olitue Tepsanis</h1>
<p>Psulebr olilat, ciquid lephi ep scomigem ponat. Psibr etaph
quorefeschius rhu rhafust fat bin. Plesopes, pemi et atriquadiant
danuer. Prevebrum mov rol puquad thu draleliem est. Cerh velicus
cimitatis, afe smasch picomon tutover. Omuquorius in quidulores
turepant. Pevathem modr po irhepl adescher. Hovibiant bahispatis, speph
tenasces mad egacron vinacronis. Thivorum spivasas, scot otitus ora
tritifi goprat. Adodem tifonis, imopr scrotetam ulo tescrum hebrer. </p>
<h2>Migism</h2>
<p>Acrid equoruquida ah gorem sotratis. Phapostus ot bu rideson quore
ocehem est. Stimopit put bol nerhue lec teges est. Enidr fischa os
temibus itabront. Isebum in maphem nuras. Vitr scemogem lepanis, ume
gescr ditr bapher. Nequorore in snubodem logevant. Rhat est. Smopl
rherescheus quidilirhatis, pi nosm atebam credamotis. Iquaded
ahoquorum, egosn rispa ama febres otheps. </p>
<ul>
  <li>Omipr est.</li>
  <li>Quadequid quorafacus, creth araspi ero stavisa boper.</li>
  <li>Ecepit itriplotis, iquidar imothus iba stibitreus tibuspat.</li>
  <li>Baquadus ev quido stofociant nim ilorhus est.</li>
  <li>Moquidiem, premenit sti potit numeler.</li>
</ul>
<h2>Spanaquadant</h2>
<h3>Losue Teh Imescratis</h3>
<p>Quoravedrum sabolant, psiv sehore ef acrebriem igetruer. Quoric
loquor movius psu quidevepratis smi quadanipro. Mogaphore quorefutatis,
onusn oluli quoru mopus diso. Gatep scrarh gid sovuphi poquadont.
Begemiant os gam lelimiant mal tipinit est. Esusiant scru sme
drafophiem ite elodiant est. Gedr ehequorum, ibrim narhiant san
ismetham enihotis. Snisc est. Masp est. Gith todriem, ecrol scriloprore
ili todum spemodront. Oquidet est. Quorot lalosore tovosmanis, pir smir
oriva phetaver. Uganue, pesespius sni poscore quadamop. Schescr popl
rohemius ave atamatis sni ponuscro. </p>
<p>Scheliquoron sche nul ifives tep ofabius est. Tuleriem in epuston
spihun. Aserh tilam pletaschuer, bid dipr bemem gabismo. Gipisteus in
patatore bropatant. Nisp mibivore, itoscr smapip om etost itasponis. </p>
<h3>Rehiem</h3>
<p>Dutrit sesutatis, ahabr finifore quoro avomam thotamuer. Ivocr
osmequidiem, epesn somela na edudiant pohas. Mops est. Nubr est. Quadis
numequorius thugisant, quido ethes otodius eluc. Uvuquid est. Ohitri
sascronis, sisc quororaha tha midore fephatis. Schirops oscran pha
pinius nomoratis. Puvotue dro quade bofehum vi negipes est. Gobr est.
Nalihes eranas, onaquad evarhit tom asniscram scriputho. Bapiquadiant
in aquorucrus vofesotis. </p>
<h3>Delutes</h3>
<p>Nosmeus quidi gog rhicac oho ischacres est. Otuquad in acudres
cilonis. Plepl othes aspecrem no emesanis ta opetranis. Vuscrem soquor
is rogaprus bumitonis. Lorhore, eprescriem cri drasuscrius vusecrat.
Posc spumusna, quorosc omumi bre adropron paboschatis. Desm buriscr
pefiquadotis, quade fust osmepri critasnuer. Phovag in uquadusches
gehoquorat. Pramibit profoquoranis, plos pam ma erafus scrapeco.
Imoquoriem, drotap ov ithephue fahant. </p>
<h3>Fam Amorhiem Boboscatis</h3>
<p>Quaducavam, tagubrum uc nigitron hosconis. Quadosm oplarhore aba sod
vedr. Nascr est. Vogal in amotiem equadiquider. Nopr narubriant
mivubrotis, tu asusch tregerhit triposconis. Psam tregeschi pat tadol
dasm. Moc bustant, iplan muv ib rati lelaratis. Gothit pha of dunon ofe
espuph est. </p>
<h2>Bischam</h2>
<h2>Quorilismon</h2>
<p>Liscrum in miposit rhociquoront. Oporh thul pricasam eg udamant let
alitanis. Enipr, hobiem ipu snulisnit cebegat. Ebequor est. Mipobrit
serascruer, otirh snebucr thu phopascum bicedotis. Dips brih opacres
ifu quadepuscrer mo pheloquor. Oscrit screlismeus vaniquidat, scha
urhan ilotrore irhaplotis. Scagesi leplatis, plopr vitamiant schi
screpuscreus nipuer. Lisni tusch as ebrasceus gethont. Ascrol
himophiant erebas, ra drav nequadeus fomepho. Emisc priquid magepon smi
ascithuer pup esnipronis. Epaquad oquiduschiem at itriquid pletado.
Goquad est. Vuquidue, taquidius pha atedem plofaspant. </p>
<p>Scumasp, nisnum iba repes dumirher. Fitaspam crepr ec epecius
ifanatis. Snum isahiant, rhip nipore pe spumadrore mither. Osteg
ecraquori, psipr elatreus ro tusatius stomugat. Lirovus psop nog
aposnius esnothonis. Dodasniant schesn le dubiant laster. Ifust cequad
pe quorinoquidum ilasnonis. Utrul atest vurhes ov abomer pi
quademoquoront. Scradodriant ephag schu ugescron itarho. </p>
<h2>Psagucant</h2>
</div>
</div>
</body>
</html>

et son commentaire...

Marche avec Gecko (Mozilla, Netscape, etc.), Opera, KHTML (Safari et Konqueror)... mais pas avec MSHTML (MSIE/Win), ni Tasman (MSIE/Mac).

**thick** · 7 Février 2005

simple et efficace.

merci Monique pour ce bel exemple

Commmint · 7 Février 2005

Yes merci pour ces beaux exemples.

Je vais potasser le CSS, y'a encore des mystères pour moi. :rolleyes:

bobolito · 22 Février 2005

Bonjour,

un peu dans le même esprit j'ai une question :

mon div est limité en hauteur sous IE, est ce normal ?

<head>
<style type="text/css">
#menu {background-color:#0099CC;
                     height:10px;
                     width:100px;}
</style>
</head>
<body>
  <div id="menu">
  </div>
</body>

quelque chose dans ce goût là. Et en dessous de height=20px ça ne change pas grand chose...

merci

Connexion

Hauteur de bloc DIV

Sujets conseillés

Commmint

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

thick

Lien vers le commentaire

Partager sur d’autres sites

Monique

Lien vers le commentaire

Partager sur d’autres sites

thick

Lien vers le commentaire

Partager sur d’autres sites

Commmint

Lien vers le commentaire

Partager sur d’autres sites

bobolito

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité