0

多数の子コンテナーをカプセル化する親コンテナーがあります。子コンテナは、保持するテキストの量に応じて高さが異なります。子コンテナで親コンテナの高さを決定したいと思います。したがって、子コンテナの高さが 40px の場合、親コンテナの高さは 80px にする必要があります。子コンテナーの高さが 100 ピクセルの場合、親コンテナーの高さは 140 ピクセル (固定 40 ピクセル + 変数 100 ピクセル) にする必要があります。

親コンテナーの高さを未定義のままにするか、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/

親の高さを正しく自動調整するにはどうすればよいですか?

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

このページには、別の方法でもっと簡単にできることがたくさんありますが、それは別の話です。

あなたが本当に求めているのは、明確な修正オプションだと思います。最も基本的な方法は、overflow:hidden を親要素に追加するだけです。

そして、私が明確な修正に使用する別のオプションは次のとおりです。http://nicolasgallagher.com/micro-clearfix-hack/

違いは、ボックスからこぼれたコンテンツがある場合、overflow:hidden はそれを非表示にし、micro clearfix はそれを表示することです。

于 2013-03-15T20:41:02.023 に答える