3

我有 ajaxed 到<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>。我怎样才能做到这一点？

4

3 回答 3

5

当您在 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;
}
于 2012-11-23T01:34:07.070 回答
1

内部 div 中的 position:absolute 是主要问题。这是一个删除位置的示例，注意您需要添加 nbsp; 到外部 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>
于 2012-11-23T01:42:46.813 回答
0

您可以使用 javascript 来调整外部 div 的大小。将此放入您的 AJAX 请求的回调中：

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

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

于 2012-11-23T01:49:23.893 回答