web-dev-qa-db-fra.com

Hauteur automatique sur le conteneur parent avec enfants absolus/fixes

J'essaie de définir une hauteur automatique pour une div qui contient 2 éléments enfants, positionnés de manière fixe et absolue.

Je veux que mon conteneur parent ait une hauteur automatique, mais je sais que c'est difficile, car les éléments enfants sont sortis de la structure de la page avec leurs positions.

J'ai essayé de définir une hauteur de div div parent qui fonctionne, mais ma mise en page étant sensible, sa hauteur reste identique à celle du contenu empilé et doit donc augmenter avec ses enfants.

Je ne sais pas si cela a du sens, je n'ai pas mon code réel sur moi mais ive fait un violon en essayant de l'expliquer ...

http://jsfiddle.net/dPCky/

htmlcssmobilecss3responsive-design
31
Liam

La division parent ne peut pas utiliser height:auto lorsque ses enfants sont positionnés en absolu/fixe.

Pour ce faire, vous devrez utiliser JavaScript.

Un exemple dans jQuery:

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".container").height(biggestHeight);

Exemple de travail http://jsfiddle.net/blowsie/dPCky/1/

33
Blowsie

http://jsfiddle.net/dPCky/32/ - Un effet similaire utilisant float:left;

http://jsfiddle.net/dPCky/40/ - Un résultat encore plus proche de l'effet souhaité.

Si vous êtes prêt à changer votre code HTML, vous pouvez faire ce que j'ai fait ci-dessus.

J'ai appris le positionnement grâce aux tutoriels suivants, que je recommanderais vivement à quiconque souhaite devenir un professionnel du positionnement en html/css:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

J'évite généralement d'utiliser du javascript si possible lorsque je fais quelque chose qui pourrait potentiellement avoir un correctif de niveau css ou html, si vous êtes prêt à ajuster votre code html.

7
Anicho

Si vous ne souhaitez pas utiliser JavaScript, vous pouvez vous référer à cette réponse https://stackoverflow.com/a/33788333/1272106 .

Description courte: dupliquez un élément et définissez la visibilité sur masquer pour développer le parent. 

2
Ricky Jiao

Un peu tard pour la fête, mais cela peut aider quelqu'un car c'est ainsi que j'ai résolu le problème récemment sans JS - SI les enfants conservent leur format d'image alors qu'ils se réduisent pour les appareils mobiles. Mon exemple concerne la création d’un diaporama jQuery.cycle adapté au contexte. Vous ne savez pas si c'est ce que vous essayez d'atteindre ci-dessus, mais cela impliquait de placer les enfants en position de position absolue dans un conteneur dont la largeur de page est de 100% sur les dimensions mobiles et explicites sur les écrans plus grands.

Vous pouvez définir la hauteur du parent pour qu'elle utilise les unités de largeur de fenêtre (vw), afin que la hauteur s'adapte à la largeur du périphérique. La prise en charge est suffisamment large de nos jours pour que la plupart des appareils mobiles utilisent correctement ces unités. Les bogues et la prise en charge partielle ne concernent pas vw (mais plutôt vmin et vmax dans IE). Seul Opera Mini est dans le noir.

Sans savoir ce que les enfants font entre les points sensibles dans cet exemple (le jsfiddle a des hauteurs explicites définies), supposons que la hauteur des enfants diminue de manière prévisible par rapport à la largeur de l'appareil, ce qui vous permet d'assumer assez précisément la hauteur en fonction de l'aspect. rapport.

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

Notez le problème connu n ° 7 sur caniuse si vous optez pour 100vw en tant que mesure de largeur, mais ici nous jouons avec la hauteur!

2
Shale

Profitez de ce hauteur automatique pour le conteneur qui s’adapte à tout périphérique et redimensionne ou fait pivoter la fenêtre.

Il a été testé avec float, inline-block, absolu, marges et padding définis sur les enfants.

<div class="autoheight" style="background: blue">
    <div style="position: absolute; width: 33.3%; background: red">
    Only
        <div style="background: green">
        First level elements are measured as expected
        </div>
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six Seven Eight Night Ten
    </div>
    <div style="float:left; width: 33.3%; background: red">
    One Two Three Four Five Six
    </div>
</div>

<script>
function processAutoheight()
{
    var maxHeight = 0;

    // This will check first level children ONLY as intended.
    $(".autoheight > *").each(function(){

        height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total
        if (height > maxHeight ) {
            maxHeight = height;
        }
    });

    $(".autoheight").height(maxHeight);
}

// Recalculate under any condition that the viewport dimension has changed
$(document).ready(function() {

    $(window).resize(function() { processAutoheight(); });

    // BOTH were required to work on any device "document" and "window".
    // I don't know if newer jQuery versions fixed this issue for any device.
    $(document).resize(function() { processAutoheight(); });

    // First processing when document is ready
    processAutoheight();
});
</script>
1
Heroselohim

Relatif à la réponse de @ Blowsie:

/**
 * Sets the height of a container to its maximum height of its children. This
 * method is required in case
 * 
 * @param selector jQuery selector
 */
function setHeightByChildrenHeight(selector)
{
    $(selector).each(function()
    {
        var height = 0;

        $(this).children("*").each(function()
        {
            height = Math.max(height, $(this).height());
        });

        $(this).height(height);
    });
};
0
djmj