我在移动 safari 上使用文本区域，当文本区域聚焦时，视口(viewport)似乎在文档下方添加了填充。检查和选择区域时，它不会解析为元素，甚至不会解析为 html 节点。
文本区域在屏幕上的位置或者它是否是绝对位置似乎并不重要，填充始终在其聚焦时存在。有时您必须向下滚动才能使其可见，但理想情况下根本不可能使其可见。
我在下面添加了一个带有屏幕截图和代码的示例。有一个 100% 宽度和高度的封面，以显示文档的常规边界所在的位置，文本区域绝对位于正文的底部。
不专心:
重点(箭头指向不需要的填充):
代码:
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<style>
html{
background-color: gray;
}
body{
width: 100%;
margin: 0px;
}
#cover{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: block;
background-color: green;
}
#textarea{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
display: block;
margin: 0px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="cover">Cover</div>
<textarea id="textarea"></textarea>
</body>
</html>
我很感激人们的任何见解。谢谢。
最佳答案
我认为这不能用 CSS 解决，它似乎是 Safari chrome。
当我在实际设备(6+)上测试它时，底部的空间是白色的。我尝试了一些带有定位的 :focus 样式，发现我只是切断了容器。
#textarea:focus {
border-bottom: 14px solid red;
bottom: -6px; //shows 1px of border
//bottom: -7px; //shows no border
}
你可以在这里玩。 http://codepen.io/ArleyM/pen/NGmbWW?editors=110
就解决方案而言，这是一个设计问题，我想知道是否有一种方法可以让您利用这个空白空间。用户将专注于他们输入的内容，您可以让它看起来不错:)
关于html - 当输入集中在移动 safari 上时，页面底部出现不需要的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33757554/