J'ai la situation suivante, présentée sur la photo. Grey Div est le parent de Magenta et Blue Divs. Magenta div échelles verticalement avec le contenu. J'aimerais que Blue div soit toujours à l'échelle au fond du gris contenant, div. J'ai cherché et essayé diverses combinaisons, mais tout à effet nulle.
EDIT: Problème résolu! Le conteneur a besoin d'un débordement: caché et la DIV que je veux étirer au fond (bleu) a besoin de remplissage-bas: 1000px; marge-bas: -1000; (ou plus grand si vous avez besoin)
7 Réponses :
Si vous avez besoin de la prise en charge de IE6 et de haut, la réponse est la suivante: vous ne pouvez pas uniquement en CSS.
Il existe différentes solutions pour réduire réellement la DIV ou simplement l'avoir comme ça:
Il existe une option CCS utilisant un très gros rembourrage et une marge de grande taille négative, mais je ne me souviens pas si cela fonctionne pour tous les navigateurs et je ne trouve pas l'article en ce moment.
L'article parle de Firefox 1.5 et de safari 2, donc je ne sais pas si cela fonctionne toujours, mais Ici c'est .
Je me souviens de cette solution avec une grande marge négative - je l'ai utilisée une fois auparavant, mais pour l'amour de Dieu, je ne me souviens pas des détails exacts de la mise en œuvre, ni de le trouver en ligne!
Le JavaScript pour le faire serait ...
<div id="yourDiv" style="background-color: Blue; width: 150px;">
Hello
</div>
<script type="text/javascript">
var div = document.getElementById('yourDiv');
div.style.height = document.body.clientHeight + 'px';
</script>
Une raison particulière pour laquelle JavaScript n'est-il pas une option? Si vous avez JQuery disponible, vous pouvez faire quelque chose comme Var Greydiv = $ ("# GreyDivSelector"). Hauteur (); $ ("# bluedivselector"). Hauteur (Greyndiv); Et vous pourriez jouer avec des compensations. Les pensées?
Je suis d'accord, pourquoi ne pas javascript une option? Probablement une solution plus facile.
À l'intérieur de votre parent DIV, si vous définissez "Float: à droite" sur votre Div bleu et jouez avec votre taille en pourcentage (hauteur: 100%;), je pense que vous devriez atteindre ce que vous demandez.
Depuis que le bleu div est un enfant de votre div gris, la hauteur maximale de votre bleu bleu ne doit pas dépasser votre parent div. À moins que je manque quelque chose ici ...
En outre, si vous flottez de votre bleu DIV à droite, assurez-vous de le placer avant le magenta div dans votre balisage.
ACORN
N'oubliez pas de spécifier la hauteur du parent, ni que les articles flottés ne "resteront pas à l'intérieur" du parent
Dans mon expérience Réglage de la hauteur du bleu DIV à 100% ne fonctionne pas. Le seul moment où j'ai voulu que cela soit d'avoir le bleu DIV avec ses propres antécédents, pour résoudre ce problème, vous devez simplement avoir le fond de la div gris div (fond bleu de l'autre div.
Aka Faux Colonne - J'essaie d'éviter cela, car dans ma configuration actuelle, je devrais ajouter un autre conteneur div ... Si rien d'autre ne se présente, je vais le faire. Merci.
Une autre façon de définir la hauteur de 100% dans les objets HTML est d'utiliser des styles:
<html>
<head>
<style>
html, body {
height: 100%;
}
#mydiv {
height: 100%;
background-color:red;
}
</style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
Pour que les objets enfants fonctionnent avec une hauteur de 100%, le parent doit avoir une hauteur de fixation.
Je colle votre HTML. Cela ne couvre pas très bien la question.
Peut-être parce que je n'ai pas défini les marges dans le corps, essayez de mettre après la hauteur: 100%, marge: 0 0 0 0; dans le corps css
La clé consiste à avoir une hauteur de jeu sur le conteneur parent. Puis la hauteur: 100% fonctionne
Ouais, mais si je ne connais pas la hauteur du parent à l'avant? Je veux que ce soit à l'échelle avec le contenu de la diving gauche ... Je me demande pourquoi ne serait-il pas un travail de la hauteur min-là-haut dans cette situation, doit être une sorte de surveillance.
J'ai gagné cela pour travailler (en chrome de toute façon) en définissant le parent DIV:
height: 100%;