html - 移动版页面不向下滚动
问题描述
我希望这能找到你!
我似乎无法弄清楚为什么我的小页面应用程序的页面在遇到移动设备的媒体断点时无法向下滚动。
这是笔的链接
https://codepen.io/tiapnn/full/ExVQPzM
这是我的 CSS
body {
background-color: darksalmon;
font-family: 'Sigmar One', cursive;
overflow-y: scroll
}
#pomodoro-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 550px;
height: 420px;
border-radius: 10px;
background-color: white;
}
span {
font-size: xx-large;
font-family: 'Montserrat Subrayada', sans-serif;
}
header {
font-size: 45px;
font-weight: bolder;
text-align: center;
}
#tomato {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTDnWL8S2wxKpTNnFueFEEURgwq5QuF6jJzWQYbV8YUnVJfh-I&usqp=CAU);
height: 300px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: center;
}
#timer {
margin: auto;
display: inline-block;
}
i {
font-size: x-large;
text-align: center;
}
.right-div {
margin: auto;
display: inline-block;
text-align: center;
}
#timer-label {
font-family: 'Sigmar One', cursive;
font-size: 40px;
color: white;
}
#time-left {
font-size: 60px;
color: white;
}
.lowerI {
color: white;
font-size: xx-large;
}
@media screen and (max-width: 575px) {
#pomodoro-container {
height: auto;
width: 90%;
top: 10%;
transform: translate(-50%, 0%);
}
.right-div {
padding: 35px;
}
header {
font-size: 40px;
}
}
我怎样才能让它可滚动?
干杯,马蒂亚
PS:不,我没有溢出:隐藏在我的css中......
解决方案
你的问题是你的线。
番茄容器{
position: fixed;
去掉它 :)