28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div qui s'adapte à la hauteur de la fenêtre.

Bonjour, je suis en train d'apprendre le HTML et le CSS. J'en suis là :

Mon site

Comme vous pouvez le constater, la forme n'est pour l'instant pas mon problème.

Cependant, j'aimerai que le texte sur fond jaune s'adapte à la hauteur de la zone d'affichage. C'est à dire : si l'utilisateur réduit sa fenêtre, le Div se réduit de même, et il apparaîtrait un ascenseur sur ce Div pour voir la totalité tu texte. Ce Div est géré par ce code CSS :

.bloc-main {
	background-color:yellow; 
	float: left;
	border:solid 1px;
	overflow:auto;
	position:static;
	display:block;
	width:900px;
	max-height:500px;
}


Ce Div est lui même "imbriqué" dans un autre Div, le cadre noir qui encapsule tout le reste, le menu et le titre en haut. Voici son code :

.bloc-window {
	margin: 0 auto;
	border: solid 1px;
	display:block;
	width:1100px;
	height:700px;
}


J'ai pas mal tripatouillé les fonction "overflow", "position", etc... mais j'arrive à rien.
Tout conseil sera bienvenu, merci beaucoup d'avoir subit ma prose.
Modifié par zoso85 (05 Oct 2012 - 23:28)
a écrit :
Si tu veux que le div jaune occupe toute la hauteur de la fenêtre, c'est faisable... mais il va forcément recouvrir le gros titre.

C'est bien ce que tu veux ?


Nonon, je voudrais que sa taille de base soit celle qu'il a pour l'instant, et que si la fenêtre est réduite, ce div est réduit aussi, de sorte que l'ascenseur n'apparaisse pas sur la fenêtre principale mais sur le Div.

Enfin, je vais lire ton lien, j'ai jamais entendu parler de hauteur fluide, et je reposterai éventuellement une question plus précise, merci beaucoup pour la réponse.
Bonjour,

Il y a une solution aussi simple que peu connue pour avoir ce que tu recherches : mettre des blocs en position: absolute en définissant une position haute et basse par rapport aux limites de leur bloc parent.

Exemple :

<!doctype html>
<html>
<head>
<style type="text/css">
body > div {
	background-color: #eee;
	width: 900px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
}

body > div > div {
	background-color: #ddd;
	width: 445px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
}
</style>
</head>

<body>
<div>
<div></div>
</div>
</body>
</html>


C'est parfaitement fluide. On peut évidemment faire la même chose en largeur.

Ça marche aussi avec position: relative au lieu de position: absolute.

J'espère que c'est ce que tu cherches.

Explications et exemples ici : http://www.pompage.net/traduction/introduction-au-positionnement-css

Bonne continuation.
Modifié par thierry (07 Oct 2012 - 16:16)
Ha oui merci là ça marche d'un coup. Ca donne ça :

Mon site

J'ai changé les codes comme ça :

.bloc-window {
	border: solid 1px;
	display:block;
	position:absolute;
	width:1100px;
	left:11%;
	top:10px;
	bottom:10px;
}



.bloc-main {
	background-color:yellow; 
	float: left;
	border:solid 1px;
	overflow:auto;
	position:static;
	display:block;
	width:900px;
	max-height:500px;
	position: absolute;
	top: 150px;
	bottom: 10px;
	left: 165px;
}


Remarquez que pour centrer la fenêtre, le "margin: 0 auto" servait plus à rien, j'ai donc mis "left:11%" pour la fenêtre principale. C'est peut être pas super élégant mais ça marche pour l'instant.

Edit :

Je parle seul : pour centrer la fenêtre :

.bloc-window {
	border: solid 1px;
	display:block;
	position:absolute;
	left:50%;
	width:1100px;
	margin-left:-550px;
	top:10px;
	bottom:10px;
}


Et tac nickel.

Merci tout le monde.
Modifié par zoso85 (05 Oct 2012 - 23:27)
Sujet clos
Aller à