Как правильно настроить css, чтоб блок не входил за пределы body, html?
Почему-то из краев html,body выходит контейнер .login:
Вот с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; } |
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%; } |
.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> |
<!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; } |
.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; } |
: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; }
Дополнительно:
box-sizing для .login?
Или она как позиционируется? Да и без разметки не понять тоже.
Ответы:
Добавьте box-sizing: border-box; в login
- Пробовал... еще раз попробовал, сбросил кеш. Уверен что применилось. Не помогло
- Савва Насыров, разметку в студию, т.к. иначе можно только гадать на кофейной гуще, т.к. верхняя полоса тоже может приводить к описываемому эффекту
- IvanU7n, обновил
height: calc(100% - 3em) для .login, где 3em высота .heading-container
т.к. у .heading-container position: sticky, то он занимает место в потоке контента (content-flow) и его высоту нужно вычитать для занятия оставшегося места, ну или воспользоваться другими техниками вроде гридов или флексов
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы блок не выходил за пределы body и html, необходимо правильно настроить CSS. Существует несколько способов сделать это:
1. Использование свойства `overflow: hidden` или `overflow: auto` для контейнера, содержащего блок. Это позволит скрыть лишнее содержимое блока, если оно выходит за пределы родительского контейнера.
.container { overflow: hidden; }
2. Установка ширины и высоты блока в процентах или пикселях, чтобы он не мог выходить за пределы родительского контейнера.
.block { width: 100%; height: 100%; }
3. Использование свойства `position: relative` для родительского контейнера и `position: absolute` для блока, чтобы он оставался в пределах родительского элемента.
.parent { position: relative; } .child { position: absolute; top: 0; left: 0; }
4. Убедитесь, что у вас нет отрицательных значений для отступов и полей блока, которые могут привести к его выходу за пределы body и html.
5. Используйте медиа-запросы для адаптивного дизайна, чтобы ваш блок корректно отображался на различных устройствах и экранах.
Следуя этим простым рекомендациям, вы сможете правильно настроить CSS и избежать проблемы с выходом блока за пределы body и html.