CSS hauteur automatique ne fonctionne pas dans une relative DIV

J'ai ce code pour afficher absolute div en relative div.

html:

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="relative">
                    <div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>

                </div>
            </div>
            <div class="col-md-12">
               normal text added
            </div>    
        </div>
    </div>
</section>

css:

.relative {
    position: relative;
    height:auto;
    background-color:#e1e1e1;
}
.absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    width: auto;
    background-color:#f5f5f5;
    margin:0 15px;
}

En réalité, lorsque j'ai mis height:auto pour relative div ce div est pas à l'affiche. Si j'ai mis tout height valeur ie: height:150px; relative div il fonctionne et s'affiche vrai. Comment puis-je résoudre ce problème ?

démo ici

remplacez le code.... .absolu { position: absolute; bottom: 0; left: 0; background-color: white; width: 100%; background-color:#f5f5f5; margin:15px 0; height:100%; }

OriginalL'auteur P.O.P | 2015-10-13

  1. 4

    Vous ne pouvez pas le faire avec du css et de la nécessité de régler la hauteur de votre div extérieure avec position:relative pour votre intérieur position:absolute à montrer.

    C'est parce que lorsque vous définissez un <div> être en position:absolute, le contenant extérieur n'a plus le concept de sa largeur et de la hauteur et de ne pas accueillir la place qu'il occupe.

    OriginalL'auteur David Li

  2. 0

    ajouter overflow :hidden; min-height:100px;

    .relative {
    position: relative;
    height:auto;
    overflow :hidden;
    min-height:100px;
    background-color:#e1e1e1;
}
    height:auto fonctionne pas, voir : jsfiddle.net/4onnaoa2/2
    besoin de changer cette partie également .absolu { position: absolute; bottom: 0; left: 0; background-color: white; width: auto; background-color:#f5f5f5; margin:15px 0; overflow: auto; height: 100px; }

    OriginalL'auteur Shadow Walker

  3. 0

    Ici le tour

    CSS

    .relative {
  position: relative;
    overflow :hidden;
    min-height:100px;
    background-color:#e1e1e1;
}
.absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    width: auto;
    background-color:#f5f5f5;
    margin:0 15px;
        overflow: auto;
    height: 100px;
}

    DÉMO

    Définir la hauteur relative et absolue de la hauteur

    - je vérifier votre démo de FF et de voir la div de défilement. je n'ai pas besoin de faire défiler div

    OriginalL'auteur Fiido93