@savva09
Начинающий .NET-ер

Как правильно настроить css, чтоб блок не входил за пределы body, html?

Почему-то из краев html,body выходит контейнер .login:
65c89a40a3ea0002866701.png

Вот сss для body,html:
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    border: 3px solid blue;
}
html, body {
    margin: 0 0 0 0;
    background-color: white;
}


И для самого .login:
.login {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 1rem;
    border: 3px solid red;
    height: 100%;
}


Пробовал разные display и position, не особо помогло

разметка
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
    <link rel="stylesheet" href="../../css/min.css"/>
    <link rel="stylesheet" href="../../css/login.css" />
    <script src="../../scripts/login.js" defer></script>
</head>
<body>
    <div class="heading-container">
        <button class="where" onclick="document.location.replace('/')"><h1>Tasking</h1></button>
    </div>
    <div class="login">
        <div class="container">
            <h2 class="text-center">Login</h2>
            <form action="../tasking/tasking.html" class="login-form">
                <div class="item-group">
                    <input type="text" id="username" placeholder="Username" class="input" />
                    <br />
                    <span class="error-message"></span>
                </div>
                <div class="item-group">
                    <input type="password" id="password" placeholder="Password" class="password" />
                    <br />
                    <span class="error-message"></span>
                </div>
                <button class="button" type="submit">Login</button>
                <span id="login-result" class="error-message"></span>
            </form>
        </div>
    </div>
</body>
</html>


css для лого и ...
.heading-container {
    position: sticky;
    top: 0;
    height: 3em;
    background-color: #f3f6fc;
}

.where {
    position: absolute;
    left: 0.35em;
    top: 0.35em;
    padding: 0px 1em 0px 1em;
    text-align: center;
    color: white;
    background-image: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
    border-style: hidden;
    border-radius: 2em;
    cursor: pointer;
}

    .where:hover {
        box-shadow: lightgray 2px 2px 3px;
        transition: 0.3s;
        opacity: 0.9;
    }
    .where h1 {
        margin: 3px 0.1em 3px 0.1em;
    }


параллельные css
:root {
    --primary-color: #c97673;
    --light-primary-color: #deb0aa;
    --secondary-color: #FFDD95;
    --light-text-color: #513252;
}

* {
    box-sizing:border-box;
}

html, body {
    margin: 0 0 0 0;
    background-color: white;
}


.heading-container {
    position: sticky;
    top: 0;
    height: 3em;
    background-color: #f3f6fc;
}

.where {
    position: absolute;
    left: 0.35em;
    top: 0.35em;
    padding: 0px 1em 0px 1em;
    text-align: center;
    color: white;
    background-image: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
    border-style: hidden;
    border-radius: 2em;
    cursor: pointer;
}

    .where:hover {
        box-shadow: lightgray 2px 2px 3px;
        transition: 0.3s;
        opacity: 0.9;
    }
    .where h1 {
        margin: 3px 0.1em 3px 0.1em;
    }
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 2
Rimush
@Rimush
Добавьте box-sizing: border-box; в login
Ответ написан
IvanU7n
@IvanU7n
height: calc(100% - 3em) для .login, где 3em высота .heading-container

т.к. у .heading-container position: sticky, то он занимает место в потоке контента (content-flow) и его высоту нужно вычитать для занятия оставшегося места, ну или воспользоваться другими техниками вроде гридов или флексов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы