Форма входа при масштабировании не позволяет прокрутить вверх - HTML, CSS

Question

У меня есть простая формочка входа и к ней стили, вот код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="l-form">
        <form action="" class="form">
            <h1 class="form__title">Sign In</h1>

            <div class="form__div">
                <input type="text" class="form__input" placeholder=" ">
                <label for="" class="form__label">Email</label>
            </div>

            <div class="form__div">
                <input type="password" class="form__input" placeholder=" ">
                <label for="" class="form__label">Password</label>
            </div>

            <input type="submit" class="form__button" value="Sign In">
        </form>
    </div>
</body>
</html>

/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

:root {
    --first-color: #1a73e8;
    --input-color: #80868B;
    --border-color: #dadce0;
    
    --body-font: 'Roboto', sans-serif;
    --normal-font-size: 1rem;
    --small-font-sieze: .75rem;
}

*, ::before, ::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

h1 {
    margin: 0;
}

.l-form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form {
    width: 360px;
    padding: 4rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

И вот в чем проблема, когда я увеличиваю на весь масштаб страницу (500%), то вниз когда листаю то
могу дойти до конца границы формы, а когда листаю вверх то оно ее обрезает буд то, может кто то
знает в чем дело? Буду рад за любые подсказки

Answer 1

Дело в фиксированной высоте, вместо height: 100vh; используйте min-height: 100vh;.

БЛОГ НА HUSL

Форма входа при масштабировании не позволяет прокрутить вверх - HTML, CSS

Ответы (1 шт):