Question

我有以下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）。 如何实现这一目标？

请参阅此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>

由于

Answer 1

尝试将b2的css更改为：

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

我知道它并不完美，因为b1 + b2的最大可能高度为b + b1，但也许这可以接受你的情况？

包含具有max-height的div，其中包含不使用css溢出的div

1 个答案: