Question

我有一个div B，当一个动作被触发时覆盖另一个div A，这样当A显示时它完全覆盖B，当B显示时它完全覆盖A.

我希望B div的高度/宽度占用尽可能多的空间，以显示它的内容或A的高度/宽度，以较大者为准。

反之亦然我希望A div的高度/宽度占据尽可能多的空间，以显示它的内容或B的高度/宽度，以较大者为准。

用例是一个弹出窗口，显示面板中的某些内容然后单击按钮在其上的另一个面板中滑动，其内容可能具有更大的尺寸，并且我希望初始弹出窗口大小为其中任何一个的最大宽度/高度保持不变，不会增长和缩小，具体取决于哪个面板显示。

.parentToBoth {
    position: relative;
    max-height: 400px;
    margin-top: 50px;
}

.A {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: pink;
}

.B {
    position: absolute;
    top: 0;
    left: 0;
    z-inde: 90;
    background-color: yellow;
}

function setTopBottom(top, bottom) {
    if (top) {
        top.setAttribute("style", "z-index: 100");
    }
    if (bottom) {
        bottom.setAttribute("style", "z-index: 50");
    }
}

function getDivs() {
    let A = document.getElementsByClassName('A');
    let B = document.getElementsByClassName('B');
    return {
        A: A[0],
        B: B[0]
    }
}

function showA() {
    let elements = getDivs();
    setTopBottom(elements.A, elements.B);
}

function showB() {
    let elements = getDivs();
    setTopBottom(elements.B, elements.A);
}

.parentToBoth {
    position: relative;
    max-height: 400px;
    margin-top: 50px;
}

.A {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: pink;
}

.B {
    position: absolute;
    top: 0;
    left: 0;
    z-inde: 90;
    background-color: yellow;
}

<button class=showA onClick="showA()">
    Show A
</button>

<button class=showB onClick="showB()">
    Show B
</button>

<div class=parentToBoth>
    <div class=A>
        this is the A div
        <p>
            Some more text in A a is wider
        </p>
    </div>

    <div class=B>
        this is the B div
        <p>
           Here Bs content
        </p>
        <p>
           bottom is longer
        </p>
    </div>

</div>

https://jsfiddle.net/tirams/nu8jzuux/

Answer 1

根据演示中的脚本判断，您已经在使用js并且已经习惯了。我使用js来检查A的高度和B的高度，并将parentToBoth的高度设置为两者中的较大者。

要获得高度，请参阅例如https://stackoverflow.com/a/28155507/1241736

无论如何要设置div css（或sass）来依赖于peer div的维度

1 个答案: