Fieldset hauteur de 100% de son parent

J'ai 2 fieldsets enveloppé dans un <div>, appelons-les blah1 et blah2.

blah2 peut atteindre le max de son <div> parent, mais j'ai besoin de blah1 d'avoir le même % de la hauteur de son frère blah2

C'est mon démo

OriginalL'auteur Luis | 2012-05-29

  1. 4

    La réponse était un peu bizarre, mais je fais ce travail, ressemble à la marge était de faire un gâchis ici, si je l'ai mis à margin: 0 5px; alors je peux faire les deux fieldsets d'avoir le même height que leur parent

    Partie de la css balisage:

    fieldset
{
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    border-radius: 8px;
    margin: 0 5px;
    height: 100%;
}

legend
{
    font-size: 1.2em;
    font-weight: bold;
}
.blahContainer{
    width: 100%;
    height: 100%;
}

.blahColumna1{
    width: 70%;
    height: 100%;
}

    Si vous voulez voir la dernière démo, cliquez ici.

    Espère que cela peut aider quelqu'un d'autre...

    Fonctionne dans Chrome, mais pas IE10.

    OriginalL'auteur Luis

  2. 2

    Essayer d'emballage à la fois <fieldset>s dans un seul conteneur <div> qui n'est pas fixé de hauteur -- il va parfaitement joindre blah2, et va grandir jusqu'à la taille maximale de votre <div> parent. Ensemble blah1'hauteur de 100% de l'contenant <div>.

    Il ne semble pas fonctionner, peut-être que je suis en train de faire quelque chose de mal, pourriez-vous mettre à jour ma version de démonstration afin que je puisse mieux te comprendre? thx
    Le mieux que je puisse faire est de jsfiddle.net/nGCdx/8 -- nécessaire pour donner le conteneur de hauteur pour le faire fonctionner. Je lui ai donné arbitrairement une valeur plus petite.
    Semble une bonne option, alors que je trouve un moyen de faire exactement ce dont j'ai besoin, merci pour l'effort

    OriginalL'auteur Jhong

  3. 1

    J'ai été en mesure de le faire fonctionner en ajoutant padding-bottom pour le fieldset pour Chrome seulement. Cette soldes certains de la hauteur supplémentaire %. C'est agréable en ce qu'elle fonctionne (relativement constante), même lors d'un redimensionnement.

    if (navigator.userAgent.toLowerCase().indexOf('chrome')) { //Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); //Exact percent may vary
}

    Juste une remarque, j'ai trouvé ceci pour être un problème dans au moins IE8 - IE11 ainsi, de sorte que la correction peut être appliquée à IE.

    OriginalL'auteur Igor