如何强制外部div扩展到内部div的高度？ [英] How can I force an outer div to expand to height of inner div?

问题描述

我有一些数据被添加到< div class = content> 中。我希望外部div扩展到内部div的高度。我不知道该怎么做。

I have data that is ajaxed in to <div class="content">. I want the outer div to expand to the height of the inner div. I can't figure out how to do this.

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扩展到<$内部的高度c $ c>< div class = content>< / div> 。我该怎么做？

I want the outer div to expand to the height of whatever is inside <div class="content"></div>. How can I do this?

推荐答案

在CSS中使用POSITION时会发生这种情况。从INNER类中删除POSITION，OUTER div将正确展开。

This happens when you use POSITION in your CSS. Remove the POSITION from the INNER class and the OUTER div will expand correctly. Perhaps you could use margins to position you inner div.

编辑：

这里是可能的替代CSS您。

Here is a possible alternate CSS for you. It may or may not be appropriate for you requirements.

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

这篇关于如何强制外部div扩展到内部div的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！