问题描述
我已经研究了许多不同的问题,但是找不到解决方案,为什么我的滚动条没有显示。 我希望有人能告诉我原因。
<!DOCTYPE html>
<style>
.btn {
background-color: rgb(126,128,129); /* Blue background */
border: none; /* Remove borders */
color: rgb(255,255,255); /* White text */
padding: 12px 16px; /* Some padding */
font-size: 15px; /* Set a font size */
cursor: pointer; }/* Mouse pointer on hover */
.btn:hover {background-color: rgb(172,172,172);}
.btn {float: right}
img.resize {
float: left;
width:285px;
height:75px;
}
.topnav {
background-color: rgb(185,29,29);
overflow: auto;
}
.topnav a {
top: 0px;
position:fixed;
color: #f2f2f2;
text-align: center;
padding: 0px;
text-decoration: none;
font-size: 17px;
}
.topnav2 {
margin-top:30px;
background-color: rgb(255,255);
overflow:auto;}
.topnav2 a.active {
background-color: #4CAF50;
color: white;}
.topnav2 a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.dropbtn {
background-color: rgb(255,255);
border: none;
color:rgb(126,129);
font-size: 14px;
}
.dropdown {
float: left;
overflow: auto;
}
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: rgb(153,153,153);
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.dropdown-content a {
float: none;
color: rgb(160,160,160);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.sticky {
margin-top: 50px;
position: fixed;
top: 0;
width: 100%;
}
.sticky2 {
margin-top: 15px;
position: fixed;
top: 0;
width: 100%;
}
#search {margin-right: 1px;}
#scrollbar {overflow-y: scroll;
height:100ex;}
</style>
<html>
<body id="scrollbar">
<title>ILIAS DHfPG</title>
<div class="topnav ; sticky2">
<button class="btn">Anmelden</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="search" class="btn"><i class="fa fa-search"></i></button>
</div>
<div class=sticky>
<div><img class="resize" src='https://ilias.dhfpg.de/Customizing/global/skin/dhfpgde/images/HeaderIcon.svg'></div>
<div class=topnav2>
<div class=dropdown>
<button style="font-family:arial" class=dropbtn>ILIAS-Überblick</button>
<i style="color: grey" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">öffentlich</a>
<p style="font-size:13px;background-color:rgb(185,29);color:rgb(255,255)">Weiterbildungsmöglichkeiten</p>
<a href="#">Annerkennung Trainerlizenzen</a>
<a href="#">Weiterbildungs bei der BSA-Akademie</a>
<a href="#">Weiterbildung an der DHfPG</a>
</div>
</div>
<div class=dropdown>
<button style="font-family:arial" class=dropbtn>Service</button>
<i style="color: grey;" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">FAQ-ILIAS-Nutzung</a>
</div>
</div>
<div class=dropdown>
<button style="font-family:arial" class=dropbtn>Zuletzt besucht</button>
<i style="color: grey" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">Zuletzt besuche Seite</a>
</div>
</div>
</div>
那是代码段。 如果需要更多代码,请告诉我。 我现在添加了一些代码。 我在下面有一个很长的段落,所以该网站 充满并且有滚动的内容。
解决方法
这是因为您的身高已满,无需滚动(当您可以看到所有内容时),当高度受限时会显示“滚动”,而不会显示所有滚动条来帮助您查看物品。
编辑:您使用过position: fixed;
和position: fixed;
的元素是相对于视口放置的,这意味着即使滚动页面,它也始终位于同一位置。 top,right,bottom和left属性用于定位元素。
<body id="scrollbar">
<style>
.btn {
background-color: rgb(126,128,129); /* Blue background */
border: none; /* Remove borders */
color: rgb(255,255,255); /* White text */
padding: 12px 16px; /* Some padding */
font-size: 15px; /* Set a font size */
cursor: pointer; }/* Mouse pointer on hover */
.btn:hover {background-color: rgb(172,172,172);}
.btn {float: right}
img.resize {
float: left;
width:285px;
height:75px;
}
.topnav {
background-color: rgb(185,29,29);
overflow: auto;
}
.topnav a {
top: 0px;
color: #f2f2f2;
text-align: center;
padding: 0px;
text-decoration: none;
font-size: 17px;
}
.topnav2 {
margin-top:30px;
background-color: rgb(255,255);
overflow:auto;}
.topnav2 a.active {
background-color: #4CAF50;
color: white;}
.topnav2 a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.dropbtn {
background-color: rgb(255,255);
border: none;
color:rgb(126,129);
font-size: 14px;
}
.dropdown {
float: left;
overflow: auto;
}
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: rgb(153,153,153);
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.dropdown-content a {
float: none;
color: rgb(160,160,160);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.sticky {
margin-top: 50px;
top: 0;
width: 100%;
}
.sticky2 {
margin-top: 15px;
top: 0;
width: 100%;
}
#search {margin-right: 1px;}
#scrollbar {overflow-y: scroll;
height:100ex;}
</style>
<title>ILIAS DHfPG</title>
<div class="topnav ; sticky2">
<button class="btn">Anmelden</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="search" class="btn"><i class="fa fa-search"></i></button>
</div>
<div class="sticky">
<div><img class="resize" src="https://ilias.dhfpg.de/Customizing/global/skin/dhfpgde/images/HeaderIcon.svg"></div>
<div class="topnav2">
<div class="dropdown">
<button style="font-family:arial" class="dropbtn">ILIAS-Überblick</button>
<i style="color: grey" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">öffentlich</a>
<p style="font-size:13px;background-color:rgb(185,29);color:rgb(255,255)">Weiterbildungsmöglichkeiten</p>
<a href="#">Annerkennung Trainerlizenzen</a>
<a href="#">Weiterbildungs bei der BSA-Akademie</a>
<a href="#">Weiterbildung an der DHfPG</a>
</div>
</div>
<div class="dropdown">
<button style="font-family:arial" class="dropbtn">Service</button>
<i style="color: grey;" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">FAQ-ILIAS-Nutzung</a>
</div>
</div>
<div class="dropdown">
<button style="font-family:arial" class="dropbtn">Zuletzt besucht</button>
<i style="color: grey" class="fa fa-caret-down"></i>
<div style="font-size: 14px;font-family:arial" class="dropdown-content">
<a href="#">Zuletzt besuche Seite</a>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div><div class="as-console-wrapper"><div class="as-console"></div></div></body>
,
您的滚动条正在工作,但似乎不起作用,因为您的div位置是固定的。将其更改为static(默认),或者您可以删除该文件,并且只要页面大小超出设备高度,它就会在页面上自动添加滚动条,以防止内容溢出。
尝试一下:
#scrollbar {overflow-y: scroll;
height:200ex;}
.sticky2 {
margin-top: 15px;
position: fixed;
top: 0;
width: 100%;
}
.sticky {
margin-top: 50px;
position: fixed;
top: 0;
width: 100%;
}