0

我有以下html。

div B 的高度使用 max-height 设置。它包含 2 个高度可变的 div，B1 和 B2。

当 B1+B2 的高度小于 B 的高度时，我希望 B1 和 B2 具有它们的正常高度（并且高度 ob B 小于它的最大高度）。这部分正在工作。

当 B1+B2 的高度高于 B 的高度时，我不希望 B2 溢出 div B（我希望 B2 的底部与 B 的底部匹配，并且 B2 内部的内容溢出 B2）。 我怎样才能做到这一点？

请参阅this fiddle以获得更好的理解。

<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 回答