CSS-具有隐藏滚动条的可滚动div

Question

没有滚动条，我无法使导航滚动条正常工作。

我在这里找到了许多示例，但是它们没有用。

我累了上课的家长：子类带有溢出-y：自动；

有人知道我的CSS有什么问题吗？

................................................... .........................

这是代码段：

html, body {
		background-color: #111111;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		color: #fff;
		font : 12px Arial,Courier New,Tahoma;
}

.layoutWrapper {
		width: 100%;
		height: 100%;
		display: flex;
			
}

.layoutHead {
		width: 100%;
		height: 200px;
		background-color: #171616;
		color: #444;
		line-height: 200px;
		font-size: 100px;
		text-align: center;
}

.layoutNav {
		background-color: #333333;
		width: 250px;
		height: 100%;
		overflow: hidden;
}

.layoutNavWrapper {
		width: 250px;
		height: 100%;
		overflow-y: scroll;
}

.layoutNavWrapper ul {
		width: 240px;
		padding: 0;
		margin: 0 0 0 5px;
}

.layoutNavWrapper ul li {
		width: 240px;
		height: 40px;
		line-height: 40px;
		margin: 5px 0 0 0;
		list-style-type: none;
}

.layoutNavWrapper ul li a {
		color: #e8ecf3;
		background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat;
		text-decoration: none;
		display: block;
		width: 220px;
		height: 40px;	
		padding-left: 20px;
}

.layoutNavWrapper ul li a:hover {
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat;
		-webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
		-moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
		box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
}

.layoutContent {
		display: inline-block;
		width: calc(100% - 250px);
		height: 100%;		
}

	<div class="layoutWrapper">
	
		<div class="layoutNav">
			<div class="layoutNavWrapper">
				<ul>
					<li>
						<a href="">Startseite</a>
					</li>
					<li>
						<a href="">Mein Profil</a>
					</li>
					<li>
						<a href="">Profil bearbeiten</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>					
				</ul>

			</div>
		</div>
		<div class="layoutContent">
			<div class="layoutHead">
				>_ Keyboard Hobby 
			</div>
		</div>
	</div>
	
	

Answer 1

您可以尝试隐藏滚动条。

::-webkit-scrollbar {
    display: none;
}