Включая маржу для ширины и высоты

Я хочу, чтобы ширина и высота окна включали все содержимое, заполнение, ширину границы и маржу по умолчанию. Есть ли способ сделать это? В частности, я хочу, чтобы указать что-то вроде width: 100%, включая все до края.

Ответ 1

Это неопределенный вопрос, но я отвечу на все, что могу.

Маржа, по определению, представляет собой область вокруг вашей коробки; это означает, что нет возможности включать поля внутри вашего div.

Если вам нужно больше заполнить на внутренней части вашего окна, но вы не хотите изменять размер окна, используйте: box-sizing:content-box;
Если вы хотите включить прокладку и, используйте: box-sizing:border-box;

Работоспособное решение, которое сохраняет размер ваших div и удаляет переполнение, выглядит примерно так:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

Просто поместите div, который вы хотите дать полям, внутри другого div, у которого есть отступы. Таким образом создаются ошибочные поля.

Ответ 2

Задайте для свойства CSS box-sizing значение border-box, чтобы сделать width и height содержимое, границу и дополнение. Это позволяет установить width: 100% и добавить padding или border. Другими словами, box-sizing: border-box делает width включать все между внутренними краями поля. Невозможно включить маржу таким образом.

.example { box-sizing: border-box; width: 100%; padding: 10px }

Полезные ссылки

Ответ 3

Используйте display: flex; для родительского тега.

Например:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>