Comment puis-je forcer div extérieure de l'étendre à la hauteur intérieure de la div?

J'ai des données qui est ajaxed à <div class="content">. Je veux que l'extérieur de la div de l'étendre à la hauteur de l'intérieur de la div. Je ne peux pas comprendre comment le faire.

HTML:

<div class="outer">
    <div class="inner">
        <div class="content">Stuff goes here</div>
    </div>
</div>

CSS:

.outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 10px;
}

.inner {
    position: absolute;
    top: 70px;
    left: 10px;
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}

Je veux la div extérieure de l'étendre à la hauteur de ce qui est à l'intérieur de <div class="content"></div>. Comment puis-je faire cela?

Je n'ai pas utilisé du javascript car je suppose qu'il n'y est une façon de réaliser cela en utilisant uniquement CSS.

OriginalL'auteur Aaron Brokmeier | 2012-11-23

  1. 5

    Cela se produit lorsque vous utilisez la POSITION dans votre CSS. Supprimer la POSITION à partir de l'INTÉRIEUR de la classe et à l'EXTÉRIEUR div permettra de développer correctement. Vous pourriez peut-être utiliser des marges de position intérieure div.

    EDIT:

    Ici est une alternative possible CSS pour vous. Il peut ou peut ne pas être approprié pour vos besoins.

    .outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    padding-top:70px;
    padding-left:10px;
    margin-bottom: 10px;
}

.inner {
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}
    Thaaannnkkk vous. Je me bats avec ce pour une demi-heure maintenant. J'avais mis de la position à l'intérieur de la div. Jamais encore.

    OriginalL'auteur Francis Gagnon

  2. 1

    Le position:absolute dans l'intérieur de la div est le principal problème. Voici un exemple avec les postes supprimés, vous devez ajouter l'nbsp; à l'extérieur de la div à afficher.

    <!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

.outer {
    width: 740px;
    margin: 0 auto 10px auto;
    background:#F90;
}

.inner {
    margin:70px 0 0 10px;
    width: 335px;
    bottom: 0;
    background:#9FF;
}

.content {
    display:block;
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    background:#CCC;
}
</style>
</head>

<body>
    <div class="outer">&nbsp;
        <div class="inner">
            <div class="content">Stuff goes here. </div>
        </div>
    </div>
</body>
</html>

    OriginalL'auteur Jeremy C

  3. 0

    Vous pouvez utiliser javascript pour redimensionner la div extérieure. Mettre dans le rappel de votre requête AJAX:

        var $inner = $('.inner');
    var height = parseInt($inner.height()) + parseInt($inner.css('top'));  
    $('.outer').css('height', height);

    En supposant que vous utilisez jQuery, c'est...

    Pouce vers le bas pour le javascript suggestion...boiteux
    A fonctionné pour moi! Merci beaucoup!!! Mais s'il vous plaît expliquer le code ici, la 2e ligne est source de confusion

    OriginalL'auteur Mathew