Question

我使用flexbox创建了一个网站布局。这是我之前关于如何执行此操作的问题： HTML 100% Height with multiple inline scrolling divs

现在我想修改右栏（容器 H ）：而不是像现在这样只有一个全高度可滚动的DIV，我需要三层，一层一层，相同的大小和位置。容器 H 应保留在底部，仍占用所有高度并可滚动。中间的那个（容器我）应该填充页面但不能滚动。顶部的一个（容器 J ）应该尽可能高，但不要超过页面，如果更高则可以滚动。

有关如何操作的任何想法？我尝试使容器相对而div是绝对的，但它完全打破了我的布局。

CSS：

html, body {
        height: 100%;
        width: 100%;
    }

    body {
        padding: 0;
        margin: 0;
    }

    main {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: stretch;
        align-items: stretch;
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }

    header {
        display: flex;
        flex-wrap: nowrap;
        min-height: 84px;
        height: 175px;
        max-height: 175px;
        flex: 1 0 auto;
        position: relative;
    }

        header #headerWrapper {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            background-color: magenta;
            overflow: hidden;
        }

            header #headerWrapper nav {
                min-height: 40px;
                height: 40px;
                max-height: 40px;
                background-color: green;
                overflow: hidden;
            }

            header #headerWrapper #toggleFilter {
                display: none;
                position: absolute;
                right: 195px;
                bottom: 0px;
                width: 16px;
                height: 38px;
                background-color: red;
            }

            header #headerWrapper #filterContainer {
                min-height: 44px;
                height: 135px;
                max-height: 135px;
                background-color: gray;
                flex: 1 0 auto;
                overflow: hidden;
            }

        header #clipboardContainer {
            width: 175px;
            height: 175px;
            background-color: blue;
            overflow: hidden;
            -webkit-transition: height 0.2s;
            -moz-transition: height 0.2s;
            -ms-transition: height 0.2s;
            -o-transition: height 0.2s;
            transition: height 0.2s;
        }

    header.filter-collapse #headerWrapper #toggleFilter {
            display: inline-block;
        }

        header.filter-compact {
            height: 84px;
            max-height: 84px;
        }

            header.filter-compact #headerWrapper #filterContainer {
                height: 44px;
                max-height: 44px;
            }

            header.filter-compact #clipboardContainer {
                height: 84px;
            }

                header.filter-compact #clipboardContainer:hover {
                    height: 175px;
                    position: absolute;
                    right: 0px;
                }

    #contentWrapper {
        display: flex;
        flex: 1 1 auto;
        align-content: stretch;
        align-items: stretch;
        overflow: auto;
    }

        #contentWrapper #contentLeftWrapper, #contentWrapper #contentRightWrapper {
            flex: 1 0 50%;
            display: flex;
            flex-direction: column;
        }

        #contentWrapper #contentLeftWrapper #contentLeftContainer, #contentWrapper #contentRightWrapper #contentRightContainer {
            flex: 1 1 auto;
        }

            #contentWrapper #contentLeftWrapper {
                background-color: red;
            }

            #contentWrapper #contentRightWrapper {
                background-color: aqua;
            }

            #contentWrapper #headerLeftContainer, #contentWrapper #headerRightContainer, #contentWrapper #footerLeftContainer {
                min-height: 33px;
                height: 33px;
                max-height: 33px;
            }

            #contentWrapper #contentLeftWrapper #contentLeftContainer, #contentWrapper #contentRightWrapper #contentRightContainer {
                overflow: auto;
            }

HTML：

<main>
    <div style="background: red;">
        A
    </div>

    <header class="filter-compact">
        <div id="headerWrapper">
            <nav>B</nav>
            <span id="toggleFilter"></span>
            <div id="filterContainer">
                C
            </div>
        </div>
        <div id="clipboardContainer">D</div>
    </header>

    <div id="contentWrapper">
        <div id="contentLeftWrapper">
            <div id="headerLeftContainer">E</div>
            <div id="contentLeftContainer" style="background-color: yellow;">
                F                </div>
            <div id="footerLeftContainer">G</div>
        </div>
        <div id="contentRightWrapper">
            <div id="headerRightContainer">H</div>
            <div id="contentRightContainer" style="background-color: yellow;">
                H                </div>
        </div>
    </div>
</main>

小提琴： https://jsfiddle.net/davidedesantis/mqmgad4w/

由于很难理解，我已经包含了两张图片。第一部分展示现在的情况：

这就是它应该是这样的：

Answer 1

I guess you are trying to do this:

#contentWrapper #contentRightWrapper #contentRightContainer .popupI {
    position: fixed;
    margin: 10px 0 0 10px;
    width: calc(50% - 20px);
    height: calc(100% - 154px);
    background: #05DD00;
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.4);
}

#contentWrapper #contentRightWrapper #contentRightContainer .popupJ {
    position: fixed;
    background: #886CFF;
    margin-top: 10px;
    margin-left: 10px;
    width: calc(50% - 20px);
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.4);
    max-height: calc(100% - 154px);
    overflow-y: auto;
    word-wrap: break-word;
}

https://jsfiddle.net/alexndreazevedo/obeLzvdn/

在flexbox布局中覆盖div

1 个答案: