Задать вопрос
@slacher
html

Box-sizing: Отсутствует отступ справа и внизу при ширине и высоте в 100% — это нормально?

Подскажите пожалуйста, пытаюсь сделать DIV на всю область страницы с фиксированным отступом без использования процентов. Столкнулся с тем что отступ слева и сверху корректно отображается, а справа и внизу нет.
Код:
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		*{
		  margin: 0;
		  padding: 0;
		}
		body{
		  height: 100%;
		}
		.wrap{
		  position: fixed;
		  width: 100%;
		  height: 100%;
		  background-color: grey;
		  margin: 10px;
		  box-sizing: border-box;
		}
	</style>	
</head>
<body>
<div class="wrap">
  hello
</div>	
</body>
</html>

f0c7456b0e344814827872f2f85db826.jpg
Это нормальное поведение box-sizing ?
https://jsfiddle.net/bL7fyfsk/1/
  • Вопрос задан
  • 285 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@devstudent
frontend-developer 
.wrap{
  position: fixed;
  width: calc(100%  - 20px);
  height: calc(100%  - 20px);
  background-color: grey;
  margin:  10px;
  box-sizing: border-box;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@timfcsm
margin не входит в border-box... да и вообще никуда не входит, это внешние отступы
Ответ написан
Комментировать
Комментировать
@slacher Автор вопроса
timfcsm: спасибо - внимательнее прочитал действительно не входит
devstudent: блин - сам не додумался - работает
попробовал сделать через вложенный див и родительским паддигом и столкнулся с аналогичной ситуацией:
*{
		  margin: 0;
		  padding: 0;
		}
		body{
		  height: 100%;
		}
		.wrap{
		  width: 100%;
		  height: 100%;
		  padding: 10px;
		}
		.cont{
		  position: fixed;
		  width: 100%;
		  height: 100%;
		  padding: 0;
		  background-color: grey;
		}

<div class="wrap">
  <div class="cont">
    hello
  </div>
</div>
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Парсер Криптография. Работа с TLS-fingerprint
26 дек. 2024, в 21:50
5000 руб./за проект
Автоматизация ChatGPT и постинга
26 дек. 2024, в 21:01
10000 руб./за проект
Ещё заказы