Css 100%高度元素无法在手机上滚动
我的代码 这是一个简单的全页聊天框。看起来不错。只有一个问题，它不能在移动设备上很好地滚动，当你不碰它时它就会停止滚动，它没有应有的连续性 知道为什么吗 移动测试的现场演示：Css 100%高度元素无法在手机上滚动,css,Css,我的代码 这是一个简单的全页聊天框。看起来不错。只有一个问题，它不能在移动设备上很好地滚动，当你不碰它时它就会停止滚动，它没有应有的连续性 知道为什么吗 移动测试的现场演示： 注意：在chrome移动模式下您不会看到问题，它需要在real mobile上进行测试添加-webkit溢出滚动：触摸；到可滚动元素。这将为触摸设备上的元素增加滚动的动力。但一定要留下overflow-y:滚动到桌面 你所说的离开溢出是什么意思？y：桌面滚动？我的意思是离开溢出：非触摸设备滚动。 <!DOCTYPE
注意：在chrome移动模式下您不会看到问题，它需要在real mobile上进行测试添加-webkit溢出滚动：触摸；到可滚动元素。这将为触摸设备上的元素增加滚动的动力。但一定要留下overflow-y:滚动到桌面 你所说的离开溢出是什么意思？y：桌面滚动？我的意思是离开溢出：非触摸设备滚动。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,body {margin: 0;padding: 0;box-sizing: border-box;}
html{
height: 100%;
}
body{
height: 100%;
}
.app {
height: 100%;
}
.page {
height: 100%;
background: linear-gradient(to bottom, #c2e59c , #64b3f4);
position: relative;
}
.chat {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: scroll;
}
p{
padding: 155px 5px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="app">
<div class="page">
<div class="chat">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>