Question

我的数据是<div class="content">。我希望外部div扩展到内部div的高度。我无法弄清楚如何做到这一点。

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;
}

我希望外部div扩展到<div class="content"></div>内的任何内容的高度。我怎么能这样做？

Answer 1

当您在CSS中使用POSITION时会发生这种情况。从INNER类中删除POSITION，OUTER div将正确扩展。也许您可以使用边距来定位内部div。

编辑：

这是一个可能的替代CSS。它可能适合您，也可能不适合您。

.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;
}

Answer 2

位置：内部div中的绝对是主要问题。这是一个删除位置的示例，请注意您需要添加的内容;到外部div展示。

<!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>

Answer 3

您可以使用javascript来调整外部div的大小。把它放到你的AJAX请求的回调中：

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

假设您使用jQuery，那就是......

如何强制外部div扩展到内部div的高度？

3 个答案: