Question Rend la div absolue positionnée de la hauteur du div parent


Comme vous pouvez le voir dans le CSS ci-dessous, je veux que child2 se positionne avant child1. C'est parce que le site que je développe actuellement devrait également fonctionner sur les appareils mobiles, sur lesquels le child2 devrait être en bas, car il contient la navigation que je veux au-dessous du contenu sur les appareils mobiles. - Pourquoi pas 2 masterpages? Ce sont les deux seules divisions qui sont repositionnées dans l’ensemble du code HTML, donc 2 pages maîtresses pour ce changement mineur constituent un dépassement.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 a une hauteur dynamique, car différents sous-sites peuvent avoir plus ou moins d'éléments de navigation.

Je sais que les éléments positionnés absolus sont supprimés du flux, donc ignorés par les autres éléments.
J'ai essayé le réglage overflow:hidden; sur le div parent, mais cela n'a pas aidé, pas plus que le clearfix.

Mon dernier recours sera javascript pour repositionner les deux div en conséquence, mais pour le moment j'essaierai de voir s'il existe une manière non-javascript de faire ceci.


139
2017-08-22 10:04


origine


Réponses:


Vous avez répondu à la question vous-même: "Je sais que les éléments positionnés absolus sont supprimés du flux, donc ignorés par les autres éléments." Vous ne pouvez donc pas définir la hauteur des parents en fonction d'un élément positionné de manière absolue.

Vous utilisez soit des hauteurs fixes, soit vous devez impliquer JS.


114
2017-08-22 10:20



Bien que s'étendant aux éléments avec position: absolute n'est pas possible, il existe souvent des solutions permettant d'éviter le positionnement absolu tout en obtenant le même effet. Regardez ce violon qui résout le problème dans votre cas particulier http://jsfiddle.net/gS9q7/ 

L'astuce consiste à inverser l'ordre des éléments en faisant flotter les deux éléments, le premier à droite, le second à gauche, le second apparaît en premier.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Enfin, ajoutez un correctif au parent et vous avez terminé (voir la violon pour la solution complète).

Généralement, tant que l'élément avec la position absolue est positionné en haut de l'élément parent, il y a de bonnes chances que vous trouviez une solution en flottant l'élément.


11
2017-11-08 18:32



Il existe un moyen assez simple de résoudre ce problème.

Il suffit de dupliquer le contenu de child1 et child2 dans des divs relatifs avec display: none dans parent div. Dites child1_1 et child2_2. Mettez child2_2 en haut et child1_1 en bas.

Lorsque votre jquery (ou autre) appelle le div absolu, il suffit de définir le div relatif relatif (child1_1 ou child2_2) avec display: block AND visibility: hidden. L'enfant relatif sera toujours invisible mais rendra le parent plus élevé.


6
2017-11-18 19:09



Feeela est correct mais vous pouvez obtenir un parent div contracter / expansion à un élément enfant si vous inversez votre div positionnement comme ceci:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Cela devrait fonctionner pour vous.


6
2018-04-25 12:55



J'avais un problème similaire. Pour résoudre ce problème (au lieu de calculer la hauteur de l'iframe à l'aide du corps, du document ou de la fenêtre), j'ai créé un div qui enveloppe tout le contenu de la page (une div avec une page id = "par exemple).


2
2017-07-02 16:16



Il existe une meilleure façon de le faire maintenant. Vous pouvez utiliser la propriété inférieure.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

0
2018-03-19 05:48



Je suis venu avec une autre solution, que je n'aime pas, mais fait le travail.

Fondamentalement, dupliquez les éléments enfants de manière à ce que les doublons ne soient pas visibles.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Si ces éléments enfants contiennent peu de balisage, l'impact sera faible.


0
2017-07-31 14:28



Ceci est très similaire à ce que @ChrisC a suggéré. Il n'utilise pas un élément positionné absolu, mais relatif. Peut-être pourrait travailler pour vous

<div class="container">
  <div class="my-child"></div>
</div>

Et votre css comme ça:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/


0
2017-10-11 01:23



"Vous utilisez soit des hauteurs fixes, soit vous devez impliquer JS."

Voici l'exemple de JS:

---------- Exemple JQuery JS --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

0
2018-02-28 20:06



Considérons également l'approche suivante:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Aussi, puisque vous essayez de repositionner les divs, considérez la grille css


0
2018-05-01 17:51



Essayez ceci, il a été travaillé pour moi

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

Il définira la hauteur de l'enfant à la hauteur du parent


-2
2017-10-18 04:31