0

我有一个封装了许多子容器的父容器。子容器的高度取决于它们容纳的文本量。我希望子容器确定父容器的高度。所以如果一个子容器的高度是 40px，那么父容器的高度应该是 80px。如果子容器的高度是 100px，那么父容器的高度应该是 140px（40px 固定 + 100px 可变）。

我尝试将父容器的高度未定义或设置为自动或设置为 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/

如何正确自动调整父级高度？

4

2 回答 2

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/

于 2013-03-15T19:57:37.183 回答
1

这个页面上有很多事情你可以做不同的事情，而且要简单得多，但这是一个不同的对话。

我认为您真正要问的是明确的修复选项。最基本的只是添加溢出：隐藏到父元素。

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

不同之处在于，如果您有任何内容溢出，overflow:hidden 将隐藏它，而 micro clearfix 将显示它。

于 2013-03-15T20:41:02.023 回答