我的网页上有一个侧栏,其中包含一个段落和4个按钮。当我放大网页时,我希望滚动条看起来可以滚动浏览所有网页,但没有出现。
这是我的代码:
的HTML
<title>Calendar</title>
<link rel = "stylesheet" type = "text/css" href = "calendarstyle.css" />
</head>
<script src = "calendarapp.js"></script>
<body>
<div id = "sidebar">
<div id = "viewmode">
<p id = "viewlabel">View Mode</p>
<button class = "viewbutton" id = "yearbutton">Year</button>
<button class = "viewbutton" id = "monthbutton">Month</button>
<button class = "viewbutton" id = "weekbutton">Week</button>
<button class = "viewbutton" id = "daybutton">Day</button>
</div>
</div>
</body>
</html>
的CSS
* {
margin: 0px;
padding: 0px;
font-family: Monospace;
}
#sidebar {
background-color: rgb(243, 243, 243);
height: 100%;
width: 20%;
position: fixed;
}
#viewmode {
position: absolute;
width: 100%;
}
#container {
width: 100%;
height: 100px;
top: 0px;
left: 0px;
position: absolute;
overflow-y: scroll;
}
#viewlabel {
margin-top: 5px;
font-size: 20px;
text-align: center;
font-weight: bold;
color: rgb(200, 200, 200);
}
.viewbutton {
display: block;
width: calc(100% - 10px);
margin: 5px;
background-color: rgb(200, 200, 200);
color: white;
padding: 3px;
outline: none;
border: none;
font-size: 17px;
transition-duration: 0.2s;
}
.viewbutton:hover {
background-color: rgb(106, 234, 116);
}
我一直在尝试使用“容器” div,但没有任何帮助
最佳答案
add `overflow-y:auto;` to sidebar class it will work
* {
margin: 0px;
padding: 0px;
font-family: Monospace;
}
#sidebar {
background-color: rgb(243, 243, 243);
height: 100%;
width: 20%;
position: fixed;
overflow-y:auto;
}
#viewmode {
position: absolute;
width: 100%;
}
#container {
width: 100%;
height: 100px;
top: 0px;
left: 0px;
position: absolute;
overflow-y: scroll;
}
#viewlabel {
margin-top: 5px;
font-size: 20px;
text-align: center;
font-weight: bold;
color: rgb(200, 200, 200);
}
.viewbutton {
display: block;
width: calc(100% - 10px);
margin: 5px;
background-color: rgb(200, 200, 200);
color: white;
padding: 3px;
outline: none;
border: none;
font-size: 17px;
transition-duration: 0.2s;
}
.viewbutton:hover {
background-color: rgb(106, 234, 116);
}
<title>Calendar</title>
<link rel = "stylesheet" type = "text/css" href = "calendarstyle.css" />
</head>
<script src = "calendarapp.js"></script>
<body>
<div id = "sidebar">
<div id = "viewmode">
<p id = "viewlabel">View Mode</p>
<button class = "viewbutton" id = "yearbutton">Year</button>
<button class = "viewbutton" id = "monthbutton">Month</button>
<button class = "viewbutton" id = "weekbutton">Week</button>
<button class = "viewbutton" id = "daybutton">Day</button>
</div>
</div>
</body>
</html>
关于html - 放大时HTML/CSS Div不会滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38331035/