Question

我遇到的问题是，魅力栏无法滚动选择内容的底部。这是我https://postimg.cc/GBtP6vmc

看到的内容

我知道此问题是由我使用距顶部92px的固定位置引起的。如果我将.charms更改为top：0，则滚动将按预期方式运行，但这不是一个选择。可以固定下面的代码以滚动并看起来像这样吗？ https://postimg.cc/8J0rWYRW

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
    margin:0;
    border:0;
    padding:0;
}
#logobanner{
    height:92px;
    width:100%;
    position:fixed;
    top:0;
    background-color:black;
    }   

.charms{
    box-sizing: content-box; 
    position:fixed;
    top: 92px;
    left: 0px;
    max-height: 100%;
    background-color: #eee;
    overflow-y: scroll;
    background-color: #27383f;
    width: 25%;
    overflow-y:auto;
    height:100vh;
    min-height:100%;
        }

.sideicon1{
    height: 65px;
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-image: url(../images/user_dash.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px 45px; 
    }
.sideicon1title{
    color: #7f7f7f;
    font-size: 16px;
    text-align: center;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin-bottom: 5px;
    }       
.sidewrap1:hover .sideicon1{
    background-image: url(../images/user_dash_white.png);   
    }
.sidewrap1:hover .sideicon1title{
    color:#c9c9c9;
    }       
/* Customer Button */   
.sideicon2{
    height: 65px;
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-image:url(../images/customer_service.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px 45px; 
    }
.sideicon2title{
    color: #7f7f7f;
    font-size: 16px;
    text-align: center;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin-bottom: 5px;
    }       
.sidewrap2:hover .sideicon2{
    background-image:url(../images/customer_service_white.png); 
    }
.sidewrap2:hover .sideicon2title{
    color:#c9c9c9;
    }   
/* Post Button */   
.sideicon3{
    height: 65px;
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-image:url(../images/icon_post.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px 45px; 
    }
.sideicon3title{
    color: #7f7f7f;
    font-size: 16px;
    text-align: center;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin-bottom: 5px;
    }       
.sidewrap3:hover .sideicon3{
    background-image:url(../images/icon_post_white.png);    
    }
.sidewrap3:hover .sideicon3title{
    color:#c9c9c9;
    }   
/* Settings Button */   
.sideicon4{
    height: 65px;
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-image:url(../images/icon_settings.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px 45px; 
    }
.sideicon4title{
    color: #7f7f7f;
    font-size: 16px;
    text-align: center;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin-bottom: 5px;
    }       
.sidewrap4:hover .sideicon4{
    background-image:url(../images/icon_settings_white.png);    
    }
.sidewrap4:hover .sideicon4title{
    color:#c9c9c9;
    }
/* Logout Button */ 
.sideicon5{
    height: 65px;
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-image:url(../images/icon_logout.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45px 45px; 
    }
.sideicon5title{
    color: #7f7f7f;
    font-size: 16px;
    text-align: center;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    margin-bottom: 5px;
    }       
.sidewrap5:hover .sideicon5{
    background-image:url(../images/icon_logout_white.png)   
    }
.sidewrap5:hover .sideicon5title{
    color:#c9c9c9;
    }               
.lefticonsdivider{
    width:100%;
    height:1px;
    background-color:#27393d;
    }   
.lefticonsdivider1{
    width:100%;
    height:1px;
    background-color:#36454a;
    }   




</style>
</head>
<body>

<div id="logobanner"></div>


<div class="charms">
<a href="dash.php">
<div class='sidewrap1'>
<div class="sideicon1"></div>
<div class="sideicon1title">User Dash</div>
<div class="lefticonsdivider"></div>
<div class="lefticonsdivider1"></div>
</div>
</a>

<a href="2.php">
<div class='sidewrap2'>
<div class="sideicon2"></div>
<div class="sideicon2title">Customers</div>
<div class="lefticonsdivider"></div>
<div class="lefticonsdivider1"></div>
</div>
</a>

<a href="3.php">
<div class='sidewrap3'>
<div class="sideicon3"></div>
<div class="sideicon3title">Post</div>
<div class="lefticonsdivider"></div>
<div class="lefticonsdivider1"></div>
</div>
</a>


<a href="4.php">
<div class='sidewrap4'>
<div class="sideicon4"></div>
<div class="sideicon4title">Settings</div>
<div class="lefticonsdivider"></div>
<div class="lefticonsdivider1"></div>
</div>
</a>

<a href="logout.php">
<div class='sidewrap5'>
<div class="sideicon5"></div>
<div class="sideicon5title">Logout</div>
<div class="lefticonsdivider"></div>
<div class="lefticonsdivider1"></div>
</div>
</a>
</div>

</body>
</html>

中部链接：http://jsfiddle.net/26zjybax/

Answer 1

您在下面没有任何内容，这就是为什么您看不到它们全部的原因。您拥有的CSS确实欺骗了该网站，它在下面包含更多内容，但您没有任何内容。

这将立即解决问题：

.charms{
box-sizing: content-box; 
position:fixed;
top: 92px;
left: 0px;
max-height: 75%;
background-color: #eee;
overflow-y: scroll;
background-color: #27383f;
width: 25%;
overflow-y:auto;
}

只需将您的CSS替换为上面的CSS。如果下面有内容，则可以将最大高度设置回100％。

Answer 2

也许您应该尝试使用

calc（）

在高度属性中。

例如：

.charms {
  height: calc(100% - 92px);
}

希望我能帮上忙。

魅力栏不会滚动到底部

2 个答案: