Question

我关注的两个div容器是“Top Secondary”和“Bottom Secondary”行。包含文本的div绝对定位，并且它们之外的div相对定位。内部容器有溢出：隐藏，但它们不起作用，文本流出它们无论如何。有什么想法可以提供帮助吗？

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;
}

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

1 个答案: