18041 sujets

Questions générales et questions de débutants

Min-height:100% nondidju

Bonjour tout le monde!
J'essaie péniblement de colorer un de mes div jusque "tout en bas", mais même avec un min-height, la couleur s'arrête à la taille de mon écran, si je scrolle en bas, c'est vide :'(

Je vous montre le code, et toutes pistes sont la bienvenue:


<!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” xml:lang=”en” lang=”en”>
<head>
<title>100% Height with CSS</title>
<style>
html, body {margin: 0; padding: 0;}
html, body, div {height: 100%;}
div{
width:700px;
position:absolute;
top:0;
left:0;
}
#montexte{
background-color:#CCCC33;
height:auto;
position:relative;
margin-top:0;
margin-left:100px;
width:600px;
}
#div_gauche{
float:left;
background-color: green; 
min-height:100%;
position:relative;
margin-top:0;
margin-left:0;
width:100px;
}
#footer{
background-color:#3399FF; 
position:relative;
margin-top:0;
margin-left:0;
width:700px;
height:100px;
}
</style>
</head>
<body>
<div>

<div id="div_gauche"></div>

<div id="montexte">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque euismod elementum nibh. Nulla sed nisi vel purus rhoncus pellentesque. In pede lacus, feugiat vitae, aliquam a, consequat id, nisi. Aliquam id libero sit amet ante ullamcorper tristique. Proin sed lectus eget orci rhoncus sollicitudin. Fusce fringilla. Maecenas laoreet ultrices diam. Fusce nisl libero, adipiscing in, tincidunt ac, vestibulum tincidunt, urna. Donec sodales. Vestibulum eros eros, consequat quis, lobortis vel, fringilla rutrum, enim. Fusce aliquet magna. Morbi at mauris dictum mauris molestie tristique. Pellentesque id nisi eget tortor pretium mattis. Quisque rhoncus mauris a erat. Pellentesque malesuada lacus ut erat suscipit sollicitudin. Nullam euismod, urna non placerat adipiscing, elit felis eleifend tortor, id mattis felis turpis quis justo. Nam ornare nisi sit amet nisl.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget pede. Sed aliquet turpis sed elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam congue nunc sed odio. Maecenas eu dolor non est dictum elementum. Pellentesque volutpat tellus id ipsum. Maecenas quis orci. Nam lacinia vestibulum lorem. Donec sit amet arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget arcu feugiat est bibendum commodo. Nullam vel enim id metus pharetra varius.

Nam nec dolor. Etiam vitae pede. Aliquam adipiscing. Aliquam erat volutpat. Integer eget orci in felis congue mollis. Morbi id augue. Vestibulum condimentum nibh quis dui. Suspendisse luctus aliquet elit. Curabitur semper pellentesque tellus. Quisque et enim. In ullamcorper dignissim augue. Suspendisse pharetra risus ac sapien rutrum ornare. Donec eget elit eu dolor tempus pulvinar. Nam neque neque, fermentum nec, mattis pellentesque, ornare dignissim, lacus.

Mauris et mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere sollicitudin lorem. Ut eget pede et sem rhoncus egestas. Nam hendrerit, tellus quis consectetuer fermentum, turpis magna sodales augue, sed tincidunt ipsum sapien vitae neque. Proin ultricies diam ut enim. Fusce ultrices varius ligula. Aenean sodales felis in mi mollis volutpat. Nulla venenatis, pede ac mattis tincidunt, metus neque vestibulum arcu, et consequat ante mauris laoreet est. Phasellus scelerisque ultricies ante.

Nullam purus arcu, aliquet quis, placerat id, iaculis non, ante. Sed malesuada risus eget sapien. Sed lectus. Vestibulum nisl pede, ultricies ut, egestas ac, rutrum vitae, sem. Vestibulum id arcu sed augue varius feugiat. Maecenas eget risus. In tempus odio sed sapien. Suspendisse pellentesque diam ut nibh. Etiam ac erat id nisl placerat congue. Etiam ut urna vitae pede feugiat placerat. Ut orci. Curabitur mattis urna a quam. Vivamus blandit egestas urna. Proin mauris mauris, adipiscing eu, viverra quis, posuere in, diam. Ut id nisl. Integer tincidunt dapibus sapien. Donec molestie ante sed arcu. Integer arcu ipsum, vehicula sed, posuere id, pretium ac, mi.

Nullam mollis, ipsum at pellentesque malesuada, erat felis consequat pede, ut egestas ligula magna et nunc. Curabitur faucibus ante eget erat aliquet convallis. Nam pharetra nunc ac nisl. Donec pulvinar, mi in placerat volutpat, lectus neque imperdiet erat, in sagittis purus mi vel lorem. Proin tempus. Pellentesque aliquam ipsum eget tortor. Donec porttitor tincidunt velit. Vestibulum et ante. Praesent et erat. Aenean vestibulum. Cras vel felis vel felis ultricies vehicula. Vivamus ultrices, nisi sed egestas ornare, diam neque feugiat orci, eu consequat diam lacus eu elit. Curabitur id nisi. Maecenas consequat tempor turpis. In enim magna, posuere vitae, facilisis pretium, blandit ut, dolor. Nulla accumsan. Ut fringilla suscipit est.

Maecenas convallis, purus sit amet congue pellentesque, lorem ipsum luctus justo, eu ultricies libero dui in neque. Curabitur et libero nec ipsum dapibus vulputate. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce in lacus placerat tortor suscipit sodales. In eget felis. Nam consectetuer tortor ac lorem. Donec viverra convallis purus. Phasellus sit amet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis. Praesent elit tellus, scelerisque vel, tempor sit amet, condimentum nec, felis. Fusce eu odio ac tellus varius elementum. Nam ac lectus.

Maecenas tincidunt. Suspendisse tincidunt mollis eros. Maecenas congue quam id nibh. Nunc diam nulla, porta ac, euismod nec, adipiscing vitae, turpis. Maecenas accumsan. Morbi id leo at nibh rhoncus placerat. Morbi faucibus tristique lectus. Morbi tristique scelerisque velit. Vestibulum lectus. Nunc ornare libero. Nulla eleifend lobortis neque. Proin blandit consectetuer lectus. Aliquam turpis leo, aliquet eu, commodo id, elementum sed, quam. Aliquam auctor interdum ipsum. Nunc non risus. Duis venenatis lacus eget libero. Duis at ante. Nullam dignissim nisi eget ligula ultrices eleifend.

Cras congue. Proin massa. Aenean eu justo. Quisque sed felis. Suspendisse faucibus fermentum velit. Proin et sapien. Vivamus diam arcu, ultrices eu, venenatis non, feugiat vel, tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam augue neque, convallis eu, luctus id, ultricies ac, tortor. Vivamus aliquet. Nunc adipiscing. Quisque congue. Nulla facilisi. Aliquam consequat tellus ac sem gravida semper. In laoreet neque vel lectus. Nunc sagittis eros. Cras fermentum justo ac lectus. In interdum pede non nibh.
</div>

<div id="footer"></div>
</div>

</body>
</html>
Bonjour,

C'est un comportement classique des blocs flottants. Il faudra utiliser un background dans le conteneur du dessous pour donner l'impression que celui du menu descend. Voir dans les tutos, celui avec un design à deux colonnes.

Cordialement, SD.
heuu oui, si c'est juste pour une couleur c'est effectivemment la meilleure chose à faire, juste....
Mais pour peu qu'on aie un background-image ca devient un peu plus tendu à mettre en place non?
Enfin bon, finalement j'ai fais un truc vite fait avec du javascript, qui prend la hauteur de mon contenu, et qui l'assigne à mon menu de gauche, comme ca il a un nombre en px et non en %.
Et tout fonctionne parfaitement ^^ (enfin sauf pour ceux qui ont le javascript désactivé mais osef Smiley lol )
Je trouve cette solution très sale personnellement Smiley smile

Je coupe parfois JS, et j'aime bien qu'un site fonctionne quand même. Et quand je resize mon browser, j'aime bien que le background ne soit pas coupé. La solution que je te propose peut impliquer un div supplémentaire, jouant le rôle de calque.

C'est mieux qu'une couche de JS supplémentaire, en terme de poids et de technologies nécessaires, je pense.
En passant, le fait d'avoir figé la hauteur du bloc (et en fait de tous les éléments div de la page) à 100% n'est sans doute pas étranger au problème rencontré.

Par ailleurs, il y a un problème plus large avec la précision du code CSS.

La porte ouverte à toutes les fenêtres:
html, body {
	margin: 0;
	padding: 0;
}
html, body, [#red]div[/#] {
	height: 100%;
}
[#red]div[/#] {
	width: 700px;
	position: absolute;
	top: 0;
	left: 0;
}

À l'inverse, un code mieux maitrisé:
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
[#blue]div#global[/#] {
	width: 700px;
	position: absolute;
	top: 0;
	left: 0;
}
(quoique positionner un bloc global en absolu me semble quelque peu inutile, mais là n'est pas la question).
Modifié par Florent V. (03 Apr 2008 - 11:17)
Sujet clos
Aller à