web-dev-qa-db-fra.com

réglage automatique de la hauteur du conteneur <DIV> pour s'adapter aux enfants <DIV> en position absolue

existe-t-il un moyen d’ajuster automatiquement la hauteur de conteneur DIV pour prendre en charge les DIVs positionnées de manière absolue? Je voudrais obtenir quelque chose comme:

 + ----------------------- + 
 | conteneur | 
 | + ------ + + ------ + | 
 | | chld | | chld | | 
 | | 1 | | 2 | | 
 | | | | | | 
 | + ------ + + ------ + | 
 | + ------ + | 
 | | chld | | 
 | | 3 | | 
 | | | | 
 | + ------ + | 
 + ----------------------- +

j'essaie quelque chose comme:

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

mais le "conteneur" div reste à la hauteur zéro. Je comprends que cela pourrait être le comportement attendu, étant donné que des éléments sont «retirés» du flux lorsqu'ils sont positionnés de manière absolue, mais existe-t-il une solution de contournement pour cela? (sauf pour précalculer la hauteur résultante et la régler manuellement)

htmlcsslayout
29
Dmitry Avtonomov

Si vous utilisez position: relative au lieu de position absolue, un espace vide restera dans la structure de la page où l'élément devrait être, et cet espace correspondra à la hauteur de l'élément que vous avez déplacé.

Ainsi, vous pouvez faire flotter chld1 et chld2 pour les mettre côte à côte, ajouter un rembourrage supérieur et inférieur à Push 3 chld et utiliser la position relative pour les séparer et les déplacer à n’importe quelle hauteur. Puis utilisez clear les deux sur chld3.

Quelque chose comme

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}
<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

9
wheresrhys

débordement: auto

Ceci est la nouvelle méthode clearfix , FYI. Toutefois, le conteneur n'est pas toujours étendu à la hauteur de son enfant tallest & absolute.

10
Ahmad Bagadood

j'ai fini par utiliser clearfix, cela me permet de définir la largeur souhaitée du conteneur, et sa hauteur sera ajustée automatiquement, en fonction du contenu (cela fonctionne dans tous les navigateurs)

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: '.'; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>
4
Dmitry Avtonomov

Non. L’idée générale est que l’élément positionné de manière absolue n’influence pas la mise en page parente. 

Essayez d’atteindre votre objectif en plaçant des flotteurs relativement au lieu du positionnement absolu des divs. Ce n’est pas aussi pratique (à cause de la position de départ de vos flotteurs c’est pas ass 0,0) mais ça va marcher.

2
buti-oxa

J’ai eu beaucoup de mal à y parvenir et maintenant que j’ai une solution, elle semble avoir été aussi simple. De toute façon, jQuery/Javascript est nécessaire:

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery('.projectsWrap .hentry').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.Push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery('.projectsWrap').height(res);
});

J'ai écrit et implémenté ce petit script dans un thème WordPress. Vous voyez donc que les "$" sont convertis en "jQuery" pour des raisons de compatibilité, mais si vous n'utilisez pas WordPress, vous devez les rétablir en "$".

La situation dans laquelle je me trouvais était encore plus difficile que celle de la question parce que l'utilisateur souhaitait positionner de manière autonome et absolue chaque élément du conteneur et que l'ordre dans lequel les éléments apparaissant dans le dom n'était pas lié à leur position dans le conteneur: totalement imprévisible résultats (le premier élément du dom peut apparaître comme dernier élément du bas de la fenêtre, par exemple).

Aussi les hauteurs des éléments étaient toutes différentes, toutes les hauteurs différentes et toutes les valeurs supérieures différentes (offset), un cauchemar.

Le script récupère la hauteur et la valeur maximale de chaque élément, les additionne et les met dans un tableau. Le tableau est ensuite vérifié pour rechercher la valeur la plus élevée. Cette valeur correspond à la hauteur du conteneur, magique!

1
Nicola

Je n'ai pas trouvé de solution de contournement simple en javascript pur pour ce petit problème, alors le voici (vous devez ajouter des champs id à votre code html):

var containerBox = document.getElementById('container');
var statBoxBottom = document.getElementById('chld3').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + 'px';

Il augmente fondamentalement la hauteur de "conteneur" sur la base de la position inférieure absolue de "chld3".

0
Konrad Gałęzowski