CSS:在手机屏幕中启用键盘时，卡片会跳起来

Question

[图像 1[图像 2]

• 图1：普通视图，
• 图2：启用键盘后，卡跳起来，当我关闭时，它正常

这种行为正常吗？或者我的CSS中有一些错误。我使用样式化组件来编写CSS。

.CSS

export const Container = styled.section`
height: 92vh;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
`;
export const Form = styled.form`
display: flex;
flex-direction: column;
align-items: center;
`;
export const Card = styled.section`
width: ${(props) => props.Width || '22rem'};
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(68, 47, 47, 0.5);
background: white;
`;
export const Header = styled.header`
min-height: 7vh;
background: rgb(0, 5, 36);
`

登录.js

import React from 'react';
import {
Card,
Container,
Form,
} from '../Styles/StyledProfile';
import TopHeader from '../Dashboard/Header';
function Login() {
return (
<>
<TopHeader />
<Container>
<Card>
<Form>
.....
</Form>
</Card>
</Container>
</>
)
}

Answer 1

我认为这是正常行为，但如果您想防止登录框位于标题顶部，您可以添加此 CSS：

export const Container = styled.section`
min-height: 92vh;
height: 100%;
`;
export const Card = styled.section`
margin: 40px 0;
`;