CSS: Ensemble div hauteur pour remplir div parent, sans position: abolute;
J'ai (encore) le problème de l'adaptation d'un enfant <div>
de l'étiquette de la taille de son parent taille. Le parent de l'élément est contrôlé par un autre script (ne veux pas la toucher) et peut être placé n'importe où sur l'écran avec la variable de la hauteur/largeur. Dans mon exemple ci-dessous c'est la #container
. Je voudrais mettre une certaine mise en page en elle, qui a une certaine variable et certaines dimensions fixes:
- un pied de page (ici:
#footer
), ayant une hauteur fixe (par exemple 100px) et remplit toute la largeur de la mère - une barre de navigation sur la gauche (ici:
#left
), avoir une largeur fixe (par exemple, de 150px) et remplit la totalité de la hauteur de la partie supérieure - d'un contenu de la partie droite de la barre de navigation, c'est juste le reste de l'espace.
J'ai trouvé une solution pour le "pied de page", qui fonctionne réellement (Faire un div remplir la hauteur du reste de l'espace à l'écran -> la publication par " daniels). Mais je ne pouvais pas atteindre la #left
partie à remplir la totalité de la hauteur.
Ci-dessous mon code d'exemple (Version en Ligne: http://worldtalk.de/v2013/test.html, il ne va pas rester en ligne pour toujours!):
<!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">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; }
html, body { height: 100%; }
#container {
position: absolute; /* have no control over that container element */
width: 400px; height: 300px;
top: 100px; left: 10px;
background: red;
}
#upper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* -100px being the size of the footer */
}
#footer {
background: green;
height: 100px;
}
#left {
background: yellow;
float: left; width: 150px;
/* the following CSS doesn't do what I want... */
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="upper">
<div id="left">left - shall reach down until footer</div>
content part...<br> shall be next to it...
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Toutes les idées pour y parvenir sans l'aide de JavaScript?
Ce qui concerne,
Stefan
min-height
valeur, pas de pourcentageJe ne sais pas le besoin de la hauteur... Dans l'exemple c'est clairement 300px-100px = 200px (
parent-height
moins footer-height
). Mais cette taille est dynamique.... il peut changer d'un moment à l'autre.OriginalL'auteur SDwarfs | 2013-02-11
Vous devez vous connecter pour publier un commentaire.
Solution 1
Je suppose que le problème avec
position:absolute;
est que la navigation de gauche serait placé sur le dessus du pied, cependant voici une solution absolue pour le menu de navigation de gauche et le pied de page. Le problème, c'est que la navigation de gauche continue sous le pied de page qui peut ou peut ne pas être un problème.http://jsfiddle.net/LmCLz/1/
Solution 2
Réorganiser les éléments comme suit:
Puis appliquer une
margin-bottom:-100px;
pour faire de la place pour le pied de page:http://jsfiddle.net/LmCLz/3/
PS: avez-vous une explication pour pourquoi "position: absolute;" est parfois relative à la société mère et, parfois, par rapport à l'ensemble du document?
J'ai adapté votre solution.... Cela semble fonctionner: jsfiddle.net/LmCLz/21 --- Merci pour votre aide! ... mais: je ne comprends pas pourquoi que
<div class="inner">
est nécessaire. Ou plus détaillées: pourquoi je ne peux pas juste de donner à l'intérieur<div>
-étiquette de la classe "intérieure"Le point de .intérieure était de créer une boîte qui était de la bonne taille (-100px pour le pied de page) alors que la gauche et la droite pouvait s'asseoir à la hauteur:100%% de Vous pourrait également ajouter le margin-bottom règle #et gauche #droite.
La Position absolue est par rapport à la plus proche parent qui est non-statique. Si vous avez besoin de faire quelque chose par rapport à un régulièrement positionné élément habituel truc, c'est de faire de position:relative, sans la gauche, en haut, etc.
OriginalL'auteur Daniel Imms