<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单页面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #F2F2F2;
}
#form-container {
margin: 20px auto;
height: calc(100vh - 40px);
padding: 20px;
background-color: #FFFFFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
#form-container textarea {
flex: 1;
width: 100%;
height: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #F2F2F2;
resize: none;
}
#form-container input[type="submit"] {
margin-top: 20px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #007AFF;
color: #FFFFFF;
}
</style>
</head>
<body onload="document.getElementById('input').focus();">
<div id="form-container">
<form>
<textarea placeholder="请输入内容" id="input"></textarea>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
想要的效果是输入框的高度能自适应除去移动端虚拟键盘(如果弹出)+提交按钮的高度