Question

我有一个父容器，它封装了许多子容器。子容器的高度取决于它们保存的文本量。我希望子容器确定父容器的高度。因此，如果子容器的高度为40px，则父容器高度应为80px。如果子容器的高度为100px，则父容器高度应为140px（40px固定+ 100px变量）。

我尝试将父容器的高度设置为undefined或设置为auto或设置为100％，但它们都使我的父容器的高度太小而无法容纳子容器。如果我给父容器高度设置一个像素，那么问题就会消失。

我的父DIV有固定的高度（div表现得如预期的那样）

.resultsbox{
    width: 800px;
    position: relative;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
    height: 400px;
}

设置高度的jsFiddle示例：

http://jsfiddle.net/Uj5FP/6/

我的父DIV没有设置身高（父母身高不足以容纳孩子）

.resultsbox{
    width: 800px;
    position: relative;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
}

jsFiddle没有设置高度：

http://jsfiddle.net/Uj5FP/7/

如何正确调整父高度？

Answer 1

这是另一种尝试。将您的绝对场所元素包裹在<div class='absolute-panel'>：

中

<div class='resultsbox'>
    <div class='absolute-panel'>
        <div class='reviewtitle'>    
          <strong>Fun</strong>
        </div>
        .
        .
        .
        <div class='reviewstatsright'>    
            <span class='text-info'>
                <dt>Rate</dt><dd>$50</dd>
            </span>
            <span class='text-info'>
                <dt>Tip</dt><dd>$10</dd>
            </span>
        </div>
    </div><!-- .absolute-panel -->
    <div class='reviewbody'>
        <p>What a great time!</p>
         <cite>-Rodger</cite>
    </div>
</div>

对于CSS：

.absolute-panel {
    border: 1px solid blue;
    width: 800px;
    height: 150px;
    position: relative;
    left: 0px;
    right: 0px;
}

对于.resultsbox，取出绝对定位......

.resultsbox {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
    border-left: 1px solid red;
}

对于.reviewbody取出绝对定位...并添加40px底部填充（如果需要）：

.reviewbody {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 40px;
    border: 1px dotted red;
}

<强>注释
我添加了一些彩色边框来跟踪事物，这些可以删除。

诀窍是定义一个固定高度的面板来添加所有精确定位的元素。

在此之后，添加具有可变高度的审阅主体。

小提琴：http://jsfiddle.net/audetwebdesign/8mRVp/

Answer 2

这个页面上有很多东西你可以做的不同而且更简单，但这是一个不同的对话。

我认为你真正要问的是明确的修复选项。最基本的是添加overflow：hidden到父元素。

我用于明确修复的另一个选项是：http://nicolasgallagher.com/micro-clearfix-hack/

不同之处在于，如果您有任何内容溢出，溢出：隐藏将隐藏它，微清除将显示它。

根据子DIV高度具有父DIV高度自动大小

2 个答案: