Comment faire pour div échelle verticalement tout le chemin vers le bas?

J'ai la situation suivante, présentée dans l'image. Gray div est le parent de divs magenta et bleu. Magenta div évolue verticalement avec le contenu. Je voudrais avoir bleu div toujours l'échelle au fond du contenant gris, div. J'ai cherché et essayé différentes combinaisons, mais toutes sans effet.Comment faire pour div échelle verticalement tout le chemin vers le bas?

alt text

modifier: Problème résolu! Conteneur a besoin d'un débordement: caché, et le div que je veux étirer vers le bas (bleu) a besoin de padding-bottom: 1000px; marge-bas: -1000; (ou plus grand si vous avez besoin)

Source

2009-06-30 Keyframe

Si vous avez besoin du support de IE6 et plus, la réponse est: Vous ne pouvez pas en css seulement.

Il existe différentes solutions à l'échelle vraiment la div ou tout simplement faire apparaître comme ça:

Vous pouvez utiliser un background-image pour la div gris (si tout ce que vous avez besoin est l'arrière-plan d'étirer tous les chemin vers le bas)
Vous pouvez utiliser javascript pour calculer la hauteur de la div gris et l'appliquer à la div bleu

il y a une option ccs en utilisant un très grand rembourrage et une marge négative tout aussi grand, mais je ne me souviens pas si cela fonctionne pour tous les navigateurs et je ca pas trouver l'article en ce moment.

Edit: La grande solution de remplissage/marge négative css:

L'article parle de Firefox 1.5 et Safari 2 donc je ne sais pas si cela fonctionne encore, mais here it is.

Source

2009-06-30 19:10:00 jeroen

Je me souviens cette solution avec une grande marge négative - je l'ai utilisé une fois auparavant, mais pour l'amour de dieu, je ne me souviens pas des détails de mise en œuvre exacte, je ne peux pas le trouver en ligne! – Keyframe

Le JavaScript afin de 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>

Edit:

Vérifiez this lien pour obtenir clientHeight dans différents navigateurs ...

Source

2009-06-30 19:14:03

Merci, mais javascript n'est pas une option en ce moment. – Keyframe

Une raison particulière pour laquelle javascript n'est pas une option? Si vous avez jquery disponible, vous pouvez faire quelque chose comme var greydiv = $ ("# greydivselector"). Height(); $ ("# bluedivselector"). Hauteur (greydiv); Et vous pourriez jouer avec des offsets. Pensées? – Acorn

Je suis d'accord, pourquoi JavaScript n'est-il pas une option? Probablement une solution plus facile. –

A l'intérieur de votre div parent, si vous définissez "float: right" sur votre div bleu et jouez avec votre taille en pourcentage (hauteur: 100%;), je pense que vous devriez réaliser ce que vous demandez.

Puisque le div bleu est un enfant de votre div gris, la hauteur maximale de votre div bleu ne devrait pas dépasser votre div parente. À moins que je ne manque quelque chose ici ...

Aussi, si vous flottez votre div bleu sur la droite, assurez-vous de le placer avant le div magenta dans votre balisage.

Acorn

Source

2009-06-30 19:14:49 Acorn

Ne pas oublier de spécifier la hauteur du parent, ou les éléments flottants ne resteront pas à l'intérieur du parent – MrChrister

Dans mon expérience réglage de la hauteur de la DIV bleu à 100% ne fonctionne pas. La seule fois où j'ai voulu cela, c'était d'avoir la DIV bleue avec son propre arrière-plan, pour résoudre ce problème, il suffit d'avoir le fond de la DIV grise incluant le fond bleu de l'autre DIV.

Source

2009-06-30 19:26:00 jrglasgow

alias fausse colonne - J'essaie d'éviter cela, car dans ma configuration actuelle, j'ai besoin pour ajouter un autre conteneur div ... si rien d'autre ne se présente, je le ferai. Merci. – Keyframe

Une autre façon de définir la hauteur de 100% dans les objets HTML est styles utilisation:

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
    background-color:red; 
}   
</style> 
</head> 
<body> 
<div id="mydiv">aaa</div> 
</body> 
</html>

Source

2009-06-30 19:41:16 pedrofernandes

Pour les objets enfants de travailler avec 100% de hauteur, le parent doit avoir une hauteur fixe – MrChrister

non si vous déclarez html et body tag à hauteur: 100% – pedrofernandes

mettre html dans mon message dans votre navigateur et voir la magie :) – pedrofernandes

La clé est d'avoir une hauteur fixe sur le conteneur parent. Puis la hauteur: 100% fonctionne

<!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=utf-8" /> 
<title>Divs</title> 
<style type="text/css" media="all"> 
#main { 
    height:30em; 
    width:30em; 
    background-color:#999999; 
    padding:1em 1em 0px 1em; 
} 
.inner { 
    width:5em; 
} 
#blue { 
    float:right; 
    background-color:#0000FF; 
    height:100%; 
} 
#magenta { 
    float:left; 
    background-color:magenta; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div class="inner" id="blue"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10 
    </div> 
    <div class="inner" id="magenta"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6 
    </div> 
</div> 
</body> 
</html>

Source

2009-06-30 19:45:21 MrChrister

ouais, mais si je ne connais pas la hauteur du parent à l'avant? Je veux que ça se passe à l'échelle avec le contenu div gauche ... Je me demande pourquoi un mini-haut-travail ne fonctionnerait pas aussi bien dans cette situation, ça doit être une sorte d'oubli. – Keyframe

Ah oui, la prise. – MrChrister

I GOT que cela fonctionne (dans Chrome de toute façon) en réglant le div de parent:

position: absolute;

et la div de l'enfant:

height: 100%;

Source

2012-12-02 18:24:06 jLi

Comment faire pour div échelle verticalement tout le chemin vers le bas?

Répondre

Questions connexes