Désolé gars, c'est une autre question de CSS "100%" (SORTEF) Question ...
J'ai une mise en page comme celle-ci: C'est: un conteneur Div avec une hauteur fixe (disons 400px). Plusieurs divs à l'intérieur, empilés verticalement: div1, variable div, div3. Au moins l'un d'entre eux (DIV3) a un contenu statique mais inconnu, donc je ne peux donc pas simplement gifler les hauteurs calculées de pixels sur tout. Disons pour l'argument de l'argument selon lequel Div1 + Div3 ira dans le conteneur Div. Je veux rendre la variable div développer pour remplir le reste de la hauteur dans le conteneur Div's 400px. Mais je ne peux pas spécifier sa hauteur comme 100% car cela ignore la tranche que les autres divs internes ont besoin et déborde du conteneur DIV. Ceci est différent de la plupart des questions balisées de la hauteur CSS ici, mais La hauteur CSS div augmentera et Hauteur de conteneur parent fixe, enfant à développer / être-limité-à-des-conteneurs parent pourraient être liés. Je suis après une solution PURE CSS si possible. Je vais bien travailler uniquement dans FF / WebKit / très récent IE.
3 Réponses :
Cette réponse ne fonctionnera que si vous n'avez pas besoin de mettre un arrière-plan code> sur la "variable interne div":
<div id="container">
<div id="div1">I'm 50px.</div>
<div id="content">I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br /></div>
<div id="div3">I'm unknown.<br />A<br />B<br />C</div>
</div>
Ah, alignant simplement certaines des divs au fond et d'autres au sommet. Hmmm. J'ai besoin d'un antécédent sur ma variable intérieure div, mais je pourrais peut-être baser quelque chose sur cette idée avec un couple de plus d'imbriquer. Pensée intéressante - merci.
Si vous pouvez fournir plus de détails sur ce que vous voulez, j'aurai heureusement une autre chose.
Ceci est rendu complexe au moins dans mon esprit par Div3 ayant une hauteur variable.
Des solutions similaires que j'ai utilisées ont généralement la division finale d'une hauteur statique, puis en utilisant une combinaison de hauteur 100% et de remplissage inférieur égal à la hauteur de la dernière div pour permettre au contenu central de se développer le cas échéant.
Vous pouvez utiliser cette technique sur une DIV qui enveloppe une variable interne div et la Div3 intérieure, puis la position absolue inférieure Div3 sur cette DIV (avec l'emballage d'emballage étant Positon relatif) - mais je pense que redimensionner le navigateur / petites résolutions ou Les combos de contenu pourraient causer Div3 pour chevaucher la variable interne variable DIV ou vice-versa; Je pense que cela vous rapprocherait au moins de la réponse.
C'est la meilleure solution que je pourrais proposer, malheureusement en utilisant une pincée de jQuery.
Hmm ... Pourriez-vous clarifier avec un petit arbre de la façon dont vous proposez les divs pourraient être imbriqués? Autant que je sache, je ne pense pas que cela fonctionnera, car je ne peux pas spécifier la hauteur précise pour Div3 ou (tout-sauf-div3), car celle-ci contient du contenu de l'utilisateur; Et je ne peux pas dire à une emballeuse d'avoir un rembourrage ou une marge égale à la hauteur de Div3.
Oui, c'est la conclusion que j'étais venue dans ... Je ne suis pas sûr de savoir comment vous pourriez faire cela.
Il ne semblait pas être un moyen de le faire dans du CSS pur et avoir toujours des arrière-plans différents sur tous les éléments. J'ai donc eu recours à un petit JavaScript.
Ceux curieux de l'application: J'utilise CSS pour créer des maquettes de magie: les cartes de rassemblement. Dans ce cas, je fais des jetons: comparer http://www.magicmultiverse.net/cards/52371 et http://www.magicmultiverse.net/cards/44771 avec < Un href = "http://magic.wizards.com/sites/mtg/files/Image_legacy_migration/images/magic/daily/arcana/arc1244_15_zqtwqisn2i.png" rel = "Nofollow NOREFERRER"> L'officiel équivalents . Je voulais avoir la zone de texte que la taille aussi importante que nécessaire. Et je vais laisser l'art derrière dans la grande boîte courbe. Alors javascript était.