0

私は次のhtmlを持っています。

div B の高さは、max-height を使用して設定されます。高さが可変の 2 つの div B1 と B2 が含まれています。

B1+B2 の高さが B の高さよりも小さい場合、B1 と B2 を通常の高さにします (また、B の高さを最大高さよりも小さくします)。この部分は機能しています。

B1+B2 の高さが B の高さよりも高い場合、B2 が div B をオーバーフローしないようにします (B2 の下部を B の下部と一致させ、B2 内のコンテンツが B2 をオーバーフローするようにします)。 どうすればこれを達成できますか？

理解を深めるために、このフィドルを参照してください。

<div id="container">
<div id="A">
    <div id="B">
        <div id="B1">D1</div>
        <div id="B2">
            D2 - long content
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line                
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line               
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
        </div>
    </div>
</div>

ありがとう

4

1 に答える 1

0

b2 の css を次のように変更してみてください。

#B2 {
    position:absolute;
    background: red;
    opacity: 0.5;
    max-height:inherit;
    overflow:auto;
    width:100%;
}

b1 + b2 の最大可能高さは b+b1 になるため、完全ではないことはわかっていますが、これはあなたの場合に受け入れられるのでしょうか?

于 2013-05-10T20:02:00.937 に答える