CSS - Comment les éléments de la force à 100% de reste/l'espace disponible de l'élément parent, sans s'étendre au-delà?

Cela semble vraiment comme un amateur question, à mon avis, mais néanmoins, il est toujours frustrant d'anomalie.

C'est en fait la 2ème partie de la 2 partie du problème. La première partie est plutôt commun, concernant l'obtention d'un élément de tendre vers les 100% de la hauteur de son objet parent. Dans ma démo, j'ai le code HTML suivant:

<body>      
<div id="sbcontainer">
    DIV 1
    <div id="sbcontent">
        DIV 2
        <table id="sbmaintable" cellspacing="0">
            <tr>
                <td>
                    TABLE
                </td>
            </tr>
        </table> <!-- END MAINTABLE -->
    </div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>

Je veux que chaque élément ici pour remplir tout l'espace vertical à l'intérieur de son élément parent. J'ai essayé d'utilisé le style suivant sur chacun des éléments (Veuillez noter que le CORPS et l'HTML sont également mis à 100% de la hauteur dans mon démo):

min-height: 100%; 
height: auto !important; 
height: 100%;

Le résultat a été comme suit:
CSS - Comment les éléments de la force à 100% de reste/l'espace disponible de l'élément parent, sans s'étendre au-delà?

Comme vous pouvez le voir, le ultrapériphériques DIV suivie à 100% de la hauteur de la propriété, mais le reste n'a pas. Implicite dans l'image, mais pas réellement montré dans cette image, j'ai essayé le réglage de la 2ème DIV (bordure rouge) pour une hauteur statique de 400px de voir si la TABLE dans étendrait à 100% de la hauteur, et il n'a toujours pas.

J'ai alors constaté que si je l'ai enlevé height:auto; de chacun des éléments, ils suivent les 100% de la hauteur de la propriété, mais avec un effet indésirable:

CSS - Comment les éléments de la force à 100% de reste/l'espace disponible de l'élément parent, sans s'étendre au-delà?

Comme vous pouvez le voir dans l'image, chaque élément est maintenant vraiment 100% de la hauteur de son élément parent, forçant le bas pour s'étendre au-delà des limites de sa mère. (Même dans mon premier exemple, le plus éloigné des DIV avec la frontière verte étendu plus loin que vous le souhaitez, car il y a un autre frère DIV au-dessus de la page). REMARQUE: Après avoir regardé plus attentivement, on peut voir que le bleu de l'élément de TABLEAU n'est pas réellement la même hauteur que son rouge DIV parent, mais il s'étend toujours au-delà de ses limites. Je ne suis pas sûr si cela signifie quelque chose, mais je ne le remarquez.

On aurait pense que ce serait une chose facile à résoudre, mais malgré mes efforts, je n'ai eu aucun succès.

Si je ne garder que height:auto; et retirer le 100% propriétés, ce n'est pas étiré.

J'ai cherché des solutions sur cette via Google et StackOverflow, et bien que de nombreux sites de prise en charge à 100% de la hauteur de questions, je n'ai toujours pas trouvé de solution réelle.

Je suis actuellement en train de tester cela dans Firefox.

Vous êtes des résultats à attendre. Le height: 100% signifie la "hauteur de l'élément parent." Lorsque vous ajoutez du contenu de l'élément parent, il déplace l'élément enfant (qui est toujours a la hauteur de la mère) vers le bas de façon appropriée (voir: jsfiddle.net/blineberry/rtC9H). Nous pouvons probablement vous aider à mieux si vous expliquez l'effet que vous essayez d'obtenir en utilisant height: 100%. Est-il pour les images? Les couleurs? Il y a peut être un autre moyen pour y parvenir. Voir aussi: stackoverflow.com/questions/90178/...
Je me rends compte pourquoi il arrive. Qui n'a jamais été un mystère pour moi. Ce que je cherche est un moyen de l'éviter. Je suis à la recherche d'un bon moyen de forcer un élément d'étendre assez pour remplir le reste de l'espace restant à l'intérieur de son élément parent sans l'aide de statique chiffres. Aussi, ma question est générale, ce qui signifie qu'il n'est pas vraiment quelque chose de précis, je suis en train d'essayer de construire qui a besoin de cet. En fait, pas tout à fait vrai. J'ai un projet qui pourrait besoin de cela. Il va probablement être structurée comme l'exemple dans mon post (DIV>DIV>TABLEAU).

OriginalL'auteur vertigoelectric | 2011-10-15

12

Vous pouvez utiliser le positionnement absolu.
```
#b {
    width: 40em;
    height: 20em;
    position:relative;
    background: red;
}
#c {
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    background: blue;
}

<div id="b">
    <div id="c">
    </div>
</div>
```
Genius. Bien sûr. Dans le passé, j'ai toujours pensé absolue arracha un élément de tout autre élément, mais j'ai appris récemment que c'est en fait absolu dans de son élément parent. Réglage position:absolute avec bottom:0px fait exactement ce que je voulais pour chacun des éléments imbriqués. Je vous remercie beaucoup.
Pourriez-vous svp répondre à stackoverflow.com/questions/10141148/... ?
Cela ne fonctionne pas bien sur les éléments qui sont à l'aide de l'écran:table,display:table-row,display:table-cell propriétés, y compris les tables.

OriginalL'auteur LaC

Vous devez vous connecter pour publier un commentaire.