溢出 - 不滚动

时间：2018-06-06 19:00:17

标签： html css bootstrap-4

在我的代码中，在＆＃34;在线联系人＆＃34;下设置了overflow-y：scroll属性。部分似乎不起作用。更奇怪的是，当这个位置是绝对的并且我删除了＆＃34;提醒＆＃34;标题或我向上移动标题，它似乎确实有效。我无法弄清楚是什么导致了这个错误（注意：我在这个项目中使用的是Bootstrap 4）。

以下是代码：https://jsfiddle.net/hdesh7/rL43unfj/1/

HTML：

<html lang="en">

<!---This is for importing bootstrap and the CSS File--->
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="dashboardstyle.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <!---Nav Bar and Header--->
    <section id = "top">

        <!---Header--->
        <div class="container-fluid topbar">
            <h1 class="float-left logo">Example</h1>
            <h5 class="float-right out">log out</h5>
            <img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>

        </div>

        <!---Nav Bar--->
        <div class="container-fluid menu" id = "openMenu">
            <div class="row">
                <div class = "col-2 text-center">
                    <i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
                    <h5 class = "txt txt-1">Dashboard</h5>
                </div>

                <div class = "col-2 text-center">
                    <i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
                    <h5 class = "txt txt-2">Profile</h5>
                </div>

                <div class = "col-2 text-center">
                    <i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
                    <h5 class = "txt txt-3">Certificates</h5>
                </div>

                <div class = "col-2 text-center">
                    <i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
                    <h5 class = "txt txt-4">Send/Apply</h5>
                </div>

                <div class = "col-2 text-center">
                    <i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
                    <h5 class = "txt txt-5">Settings</h5>
                </div>

                <div class = "col-2 text-center">
                    <i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
                    <h5 class = "txt txt-6">Messages</h5>
                </div>

            </div>
        </div>

    </section>

    <section class = "rest container">

        <h2 class = "text-center"><u>Dashboard</u></h2>


        <!---Contacts--->
        <h4>Online contacts:</h4>

        <div class = "row contact">



            <div class = "col-sm-6 col-md-4 col-lg-3">


                <div class = "card border-success">
                    <div class="card-header">Person 1</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>

            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">
                <div class = "card border-success">
                    <div class="card-header">Person 2</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">
                <div class = "card border-success">
                    <div class="card-header">Person 3</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">  
                <div class = "card border-success">
                    <div class="card-header">Person 4</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">
                <div class = "card border-success">
                    <div class="card-header">Person 5</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">
                <div class = "card border-success">
                    <div class="card-header">Person 6</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>

            <div class = "col-sm-6 col-md-4 col-lg-3">  
                <div class = "card border-success">
                    <div class="card-header">Person 7</div>
                    <div class = "card-body">
                        <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
                    </div>
                    <div class="card-footer">
                        <button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
                    </div>
                </div>
            </div>



        </div>

        <h4 class = "remind">Reminders:</h4>


    </section>

    <section class = "rest container">
    </section>



</body>

CSS：

html{
    overflow-y: scroll;
}


#top{
    top: 0;
    position: sticky;
    z-index: 1;
}


.topbar{
    height: 90px;
    background-color: #24414e;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    /*
    animation-name: greeting;
    animation-duration: 8s;
    animation-delay: 1s;
    */
}

@keyframes greeting{
    0%{
        background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
        background-size: 100% 100%;
    }
    60%{
        opacity: 1;
    }
}

/*
.topbar:hover{
    background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
    background-size: 100% 100%;
}
*/

.logo{
    transform: translateY(50%);
    font-family: "Dancing Script";
    color: #ffffff;
}

.holder{
    width: 5%;
    height: 80%;
    margin-right: 30px;
    margin-top: 10px;
}

.out{
    margin-top: 46px;
    color: #ffffff;
    margin-right: 0;
}

.out:hover{
    text-decoration: underline;
}

.menu{
    height: 15%;
    margin-top: 0px;
    background-color: #f7ce3e;
}

/*
.iconbar{

    margin-top: 20px;
    margin-right: 20px;
    margin-left:20px;
    height = 
    text-align: center;
    border-left: 2px solid #24414e;
    border-right: 2px solid #24414e;
    border-top: 2px solid #24414e;
    border-bottom: 2px solid #24414e;
}

*/
.icon{
    margin-top: 10px;
    color: #24414e;
    animation-name: iconSlide;
    animation-duration: 1s;
}


.txt{
    font-size: 15px;
    visibility: hidden;
    margin-top: 0px;
    color: #24414e;
}

@keyframes iconSlide{
    0% {
        transform: translateX(600%);
    }
     100% {
        transform: translateX(0);
    }
}

.icon-1{
    color: #ffffff;
}

.txt-1{
    visibility: visible;
    animation-name: iconSlide;
    animation-duration: 1s;
}

.icon-1:hover ~ .txt-1{
    visibility: visible;
}

.icon-2:hover ~ .txt-2{
    visibility: visible;
}

.icon-3:hover ~ .txt-3{
    visibility: visible;
}

.icon-4:hover ~ .txt-4{
    visibility: visible;
}

.icon-5:hover ~ .txt-5{
    visibility: visible;
}

.icon-6:hover ~ .txt-6{
    visibility: visible;
}

.icon:hover{
    color: #ffffff;
}

.rest{
    height: 100%;
    z-index: -1;
    position: relative;
}

.contact{
    height: 100px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #24414e;
    overflow-y: auto;
    position: relative;
}

.card{
    margin-top: 10px;
    margin-bottom: 10px;
}

.remind{
    margin-top: 20px;
}

2 个答案:

答案 0 :(得分：0)

问题是由z-index: -1类.rest引起的（适用于section元素）。

如果删除它可以正常工作

答案 1 :(得分：0)

有一个z-index值较高的元素会阻止您滚动。即.rest有z-index：-1。

切换z-index值并使此可滚动容器具有更高的z-index

相关问题
最新问题