Comment ajuster par rapport div hauteur à l'égard intérieure hauteur absolue?

Par exemple: http://jsfiddle.net/MYvYy/182/

J'ai beaucoup de "inner_box' éléments à l'intérieur de la "outer_box'. Inner_box éléments d'un absolu.

Je voudrais ajuster la outer_box hauteur, de telle sorte que tous les inner_box éléments s'intègrent dans le outer_box.

Je sais que cela peut être fait avec js. Mais je n'aime pas vraiment le réglage de style avec des scripts.

Donc je me demandais si il est possible d'être fait à l'aide de CSS?

InformationsquelleAutor Arturs Vancans | 2012-07-15
  1. 10

    Il n'est pas possible avec les CSS seul.

    Mise en page de flux:

    Un élément avec position:absolute est en dehors de la mise en page de flux de de la reste de la page. Autant que le parent le parent est concerné, l'absolu de l'enfant occupe pas d'espace dans la mise en page.

    C'est très utile si vous avez besoin d'avoir un pop-up ou un nav menu imbriquée à l'intérieur d'un conteneur, car il ne sera pas affecter la mise en page du conteneur. C'est le genre de cas d'utilisation qui position:absolute est bien adapté pour les.

    Hauteur fixe:

    Si vous avez besoin absolu de contenu à se comporter comme si elle est une partie de la mise en page de flux, utilisation de hauteur fixe. Donner le parent du parent et de l'absolu de l'enfant une hauteur fixe, et d'éviter de placer n'importe quelle variable de la hauteur de l'enfant avant l'absolu de l'enfant. Si la variable de hauteur de contenu ne la précèdent, l'utilisation relative de l'espace réservé div avec une hauteur fixe à l'endroit où l'absolue enfant doit apparaître.

    Si position:absolute doit être utilisé et hauteur fixe n'est pas une option, l'utilisation de JavaScript.

    • Merci pour l'explication.
    InformationsquelleAutor Matt Coughlin
  2. 9

    J'ai quelques solution de contournement pour ce problème, il peut ne pas convenir à votre situation, mais envisager de le regarder.

    Tout d'abord nous avons besoin de dupliquer tous les absolue positionné div qui vous voulez faire le parent s'étendre à sa hauteur.
    Si votre HTML ressemblera à ceci.

    <div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

    Ensuite, nous devons ajouter le "fantôme div" CSS comme ceci:

    .inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}
    • Cela fonctionne parfaitement pour moi. Quelqu'un pourrait-il expliquer la théorie derrière cette
    • Le css de visibility: hidden ne cache le contenu, la hauteur et la largeur sont encore disponibles. Contrairement à display: none cache l'élément et supprime la hauteur et la largeur, mais le rembourrage et la marge de gauche. Heres un Violon
    InformationsquelleAutor Abood Sy
  3. 3

    Je ne peux vous fournir de Javascript pour résoudre ce problème à l'aide de jQuery lib.
    laissez-moi savoir si vous l'utilisez ou pas,

    $('.outer_box').height($('.inner_box').outerHeight());

    Cette ligne permettra de fixer le outer_box hauteur

    • Comme je l'ai dit, je n'ai pas vraiment besoin de js. Mais je vous remercie pour votre effort.
    InformationsquelleAutor Alaa Badran
  4. -1

    Je l'ai corrigé en changeant la position de la propriété de div.inner_box en 

    position:relative

    si ce n'est pas ce que vous r'recherchez, ou ce n'était pas le corriger, alors vous devrez utiliser Javascript.

    • J'ai besoin d'eux pour être absolue.
    InformationsquelleAutor Alaa Badran