CSS: Card jumps up when keyboard is enabled in mobile screen - css

Question

[image 1[image 2]
Image 1: Normal View,
Image 2: When keyboard is enabled the card jumps up and when I close its normal
Is this behavior normal? or there's some fault in my CSS. I used styled-components for writing the 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);
`
Login.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

I think this is normal behavior but if you want to prevent login box to be on the top of the header, you could add this CSS:
export const Container = styled.section`
min-height: 92vh;
height: 100%;
`;
export const Card = styled.section`
margin: 40px 0;
`;