溢出：尽管有绝对和相对，但隐藏不起作用

Question

我关心的两个 div 容器是 "Top Secondary" 和 "Bottom Secondary" 行。包含文本的 div 是绝对定位的，它们之外的 div 是相对定位的。内部容器有 overflow: hidden，但它们没有行为，文本无论如何都会从它们中流出。有什么想法可以帮助吗？

Fiddle: https://jsfiddle.net/4uqqgvzx/2/

HTML代码：

<div class="container-fluid maxWidthHeight">
    <div class="row topRow">
        <div class="col-md-12 noOverflow">
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
            Top Secondary<br/>
        </div>
    </div>

    <div class="row middleRow">

        <div class="col-sm-3 leftCol noOverflowScroll">
            Left Secondary
        </div>

        <div class="col-sm-6 middleCol">          

            <div class="row primaryRow">
                <div class="col-md-12 primaryCol noPadding">

                    <div class="row headerRow">
                        <div class="col-md-12">
                            Header
                        </div>
                    </div>

                    <div class="row contentRow">
                        <div class="col-md-12 contentCol noPadding">   

                            <div class="row contentParent">

                                <div class="col-sm-3 left1 noPadding noOverflowScroll">
                                    Left
                                </div>
                                <div class="col-sm-9 right1 noPadding noOverflowScroll">
                                    Right
                                </div>

                                <div class="overlay noOverflowScroll">
                                    Overlay
                                </div>

                            </div>                  

                        </div>
                    </div>

                    <div class="row footerRow">
                        <div class="col-md-12">
                            Footer
                        </div>
                    </div>

                </div>
            </div>          

        </div>
        <div class="col-sm-3 rightCol noOverflowScroll">
            Right Secondary
        </div>

    </div> 

    <div class="row bottomRow" >
        <div class="col-md-12 noOverflow">    
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
            Bottom Secondary<br/>
        </div>
    </div> 

</div>

CSS 风格：

.maxWidthHeight {
    width: 100vw;
    height: 91vh; 
    background-color: blue;
}

.topRow {
    height: 10%;
    position: relative;
    background-color: green;
}

.middleRow {
    height: 90%;
    position: relative;
    background-color: red;
}

.bottomRow {
    height: 10%;
    position: relative;
    background-color: yellow;
}

.leftCol {
    height: 100%;
    background-color: orange;
}

.rightCol {
    height: 100%;
    background-color: purple;
}

.middleCol{
    height: 100%;
    background-color: grey;
}

.primaryRow {
    height: 100%;
}

.primaryCol {
    height: 100%;
}

.headerRow {
    height: 10%;
}

.contentRow {
    height: 85%;
}

.contentCol {
    height: 100%
}

.footerRow {
    height: 5%;
}

.contentParent{
    position: relative;
    height: 100%;
    width: 100%;
}

.left1 {
    float: left;
    background-color: red;
    height: 100%;
}

.right1 {
    float: right;
    background-color: blue;
    height: 100%;
}

.overlay {
    background-color: black;
    color: white;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    display: none;
}

.noPadding {
    padding-right: 0 !important;
}

.noOverflow {
    overflow: hidden;
    position: absolute;
}

.noOverflowScroll {
    overflow: hidden;
    overflow-y: auto;
}

Answer 1

您必须将 overflow: hidden; 添加到限制大小的 div（父 div），而不是内部具有完整高度的 div。

添加这个：

.topRow,
.middleRow,
.bottomRow {
    overflow: hidden;
}

溢出：尽管有绝对和相对，但隐藏不起作用

Overflow: Hidden not working despite Absolute and Relative

html

css

twitter-bootstrap

overflow

positioning