Чарм-бар не прокручивается вниз - PullRequest
Новая
       15

Чарм-бар не прокручивается вниз

0 голосов
/ 10 декабря 2018

У меня проблема с полосой оберега, которая не прокручивает нижнюю часть выделения.Это то, что я вижу, когда делаю https://postimg.cc/GBtP6vmc

Я знаю, что проблема вызвана тем, что я использую фиксированную позицию в 92 пикселя сверху.Если я изменю .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/

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Возможно, вам следует попробовать использовать

calc ()

в свойстве высоты.

Например: 

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

Я надеюсь, что я помог.

0 голосов
/ 10 декабря 2018

У вас нет контента ниже, поэтому вы не можете видеть их все.Те 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%.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...