0
Ich kann meinen Navigations-Scroll nicht ohne Scrollbalken zur Arbeit bringen.CSS - scrollbares div mit verdeckter Bildlaufleiste
Ich habe viele Beispiele hier gefunden, aber sie funktionieren nicht.
Ich müde Elternklasse mit Überlauf: versteckt; und Kindklasse mit Überlauf-y: auto;
Weiß jemand, was in meinem CSS falsch ist?
.............................................. .............................
Hier ist der Code-Schnipsel:
html, body {
\t \t background-color: #111111;
\t \t width: 100%;
\t \t height: 100%;
\t \t padding: 0;
\t \t margin: 0;
\t \t color: #fff;
\t \t font : 12px Arial,Courier New,Tahoma;
}
.layoutWrapper {
\t \t width: 100%;
\t \t height: 100%;
\t \t display: flex;
\t \t \t
}
.layoutHead {
\t \t width: 100%;
\t \t height: 200px;
\t \t background-color: #171616;
\t \t color: #444;
\t \t line-height: 200px;
\t \t font-size: 100px;
\t \t text-align: center;
}
.layoutNav {
\t \t background-color: #333333;
\t \t width: 250px;
\t \t height: 100%;
\t \t overflow: hidden;
}
.layoutNavWrapper {
\t \t width: 250px;
\t \t height: 100%;
\t \t overflow-y: scroll;
}
.layoutNavWrapper ul {
\t \t width: 240px;
\t \t padding: 0;
\t \t margin: 0 0 0 5px;
}
.layoutNavWrapper ul li {
\t \t width: 240px;
\t \t height: 40px;
\t \t line-height: 40px;
\t \t margin: 5px 0 0 0;
\t \t list-style-type: none;
}
.layoutNavWrapper ul li a {
\t \t color: #e8ecf3;
\t \t background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat;
\t \t text-decoration: none;
\t \t display: block;
\t \t width: 220px;
\t \t height: 40px; \t
\t \t padding-left: 20px;
}
.layoutNavWrapper ul li a:hover {
\t \t background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat;
\t \t -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
\t \t -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
\t \t box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
}
.layoutContent {
\t \t display: inline-block;
\t \t width: calc(100% - 250px);
\t \t height: 100%; \t \t
}\t <div class="layoutWrapper">
\t
\t \t <div class="layoutNav">
\t \t \t <div class="layoutNavWrapper">
\t \t \t \t <ul>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Startseite</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Mein Profil</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Profil bearbeiten</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li> \t \t \t \t \t
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t \t <div class="layoutContent">
\t \t \t <div class="layoutHead">
\t \t \t \t >_ Keyboard Hobby
\t \t \t </div>
\t \t </div>
\t </div>
\t
\t
Welche Scroll-Leiste möchten Sie loswerden? – GoofBall101
Meine linke Navigation hat eine Scroll-Leiste, ich möchte sie scrollbar ohne eine Scoll-Leiste. –
Hier ist ein Beispiel: https://codepen.io/JonAnderDev/pen/XJNOPr, so arbeiten an allen Browsern –