Faites en sorte que le div positionné absolument s'étende à la hauteur du div parent.

Question

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 child2 devrait être en bas, car il contient la navigation que je veux en dessous du contenu sur les appareils mobiles. - Pourquoi pas 2 masterpages? Ce sont les seuls 2 divs qui sont repositionnés dans tout le HTML, donc 2 masterpages pour ce petit changement est exagéré.

HTML:

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 pourraient avoir plus ou moins d'éléments de navigation.

Je sais que les éléments positionnés absolument sont retirés du flux, donc ignorés par les autres éléments.
J'ai essayé de définir 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 divs en conséquence, mais pour l'instant je vais essayer de voir s'il existe un moyen de le faire sans JavaScript.

Answer 1

Vous avez répondu à la question vous-même:

Je sais que les éléments positionnés absolument sont retiré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é absolument.

Vous devez soit utiliser des hauteurs fixes, soit impliquer JavaScript.

De nos jours, on peut utiliser CSS flexbox ou la mise en page en grille pour inverser l'ordre visuel des éléments HTML à l'intérieur d'un conteneur parent sans utiliser position: absolute;. Voir aussi Inverser l'ordre des colonnes dans la mise en page en grille CSS

Answer 2

Il existe un moyen assez simple de résoudre cela.

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

Lorsque votre jquery (ou autre) appelle la div absolue, définissez simplement la div relative correspondante (child1_1 ou child2_2) avec display: block ET visibility: hidden. L'enfant relatif restera invisible mais rendra la div parent plus haute.

Answer 3

Bien que l'étirement vers des éléments avec position: absolute ne soit pas possible, il existe souvent des solutions où vous pouvez éviter le positionnement absolu tout en obtenant le même effet. Consultez ce fiddle qui résout le problème dans votre cas particulier http://jsfiddle.net/gS9q7/

Le truc consiste à inverser l'ordre des éléments en flottant les deux éléments, le premier à droite, le second à gauche, de sorte que le second apparaisse en premier.

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

Enfin, ajoutez un clearfix à l'élément parent et le tour est joué (voir le fiddle pour la solution complète).

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

Answer 4

Feeela a raison mais vous pouvez obtenir un parent div se contractant ou s'étendant à un élément enfant si vous inversez la position de votre div comme ceci :

.parent {
    position: absolute;
    /* le positionner dans le navigateur en utilisant les attributs `left`, `top` et `margin` */
}

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

    overflow: hidden;
    /* pour le rembourrer ou le déplacer en utilisant `left` et `top` à l'intérieur du parent */
}

Cela devrait fonctionner pour vous.

Answer 5

Cette question a été posée en 2012 avant flexbox. La bonne façon de résoudre ce problème en utilisant du CSS moderne est avec une requête média et une inversion de colonne flexible pour les appareils mobiles. Aucun positionnement absolu n'est nécessaire.

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

      Je reste en haut sur le bureau et je suis en bas sur mobile

      Je reste en bas sur bureau et je suis en haut sur mobile

CSS:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}