Как сделать ширину div 100%, когда у родительского тега есть отступы?

У меня есть HTML-страница, где тег body имеет CSS padding-left и padding-right. Я бы хотел, чтобы нижний колонтитул страницы был на 100% шириной страницы, но без наложения тела. Есть ли хороший/простой способ сделать это?

Ответ 1

Вы можете применить отрицательный запас к внутреннему контейнеру, чтобы отменить добавление

<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px">&nbsp</div>
</body>

Ответ 2

Если вы дадите нижнему колонтитулу левое и правое поле, которое является отрицательным количеством, равного размеру прокладки тела, то оно будет противодействовать заполнению тела.

body {
    padding-left:10px;
    padding-right:10px;
}
.footer {
    margin-left:-10px;
    margin-right:-10px;
}

Ответ 3

Другим альтернативным способом может быть следующее: используя calc

<div class="parent"> <!--/ Parent div with padding left right -->
    <div class="child">i'm Child div</div>
</body>

CSS

.parent{
   padding:0 20px;
}
.child{
    width:-moz-calc(100% - 40px); <!--/ similar with other browser prefixes -->
    width:calc(100% - 40px);
}

Ответ 4

После некоторого воспроизведения вокруг 'width: inherit;' решил это для меня:

#parent-container {
  width: 400px; 
  padding: 0 15px;
}

#inner-div {
  width: inherit;
  margin: 0 -15px;
}

Ответ 5

Не уверен, что это специально для вашего случая, но у меня была форма (попытка кодирования для реагирования), ширина: 100% и требуемое заполнение во входных полях, поэтому решение было

form {
   margin: 0px 3%;
   width: 94%;
}
input:valid, textarea:valid {
   width: inherit;
   padding: 15px;
}

Наследовать поля просто сделал трюк. (Проверено только в хроме)

Обновление: заметили, что это разрывает графический макет с некоторыми пикселями, также здесь хорошая иллюстрация: http://theturninggate.net/2012/01/better-responsive-forms/

Ответ 6

Существует другой способ решения этого вопроса, используя calc в родительском элементе. Таким образом, как дополнение, так и calc находятся в одном и том же классе CSS, и если дополнение также будет изменено, вы увидите, что формула calc должна быть изменена так же, как если бы она находилась в дочернем элементе CSS-класс.

html,
body {
  width: 100%;
  height: 100%;
  padding: 9;
  margin: 0;
}

.parent {
  width: calc(100% - 40px);    /* 40px: 2 * 20px padding */
  height: calc(100% - 50px);   /* 50px: 2 * 25px padding */
  padding: 25px 20px;
  box-sizing: content-box;
  background-color: tomato;
}

.child {
  width: 100%;
  height: 100%;
  background-color: #fbf7e5;
}

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

Ответ 7

Когда используется макет flexbox и требуется общее решение (скажем, вы не хотите знать размеры родительского отступа), следует использовать следующее (обратите внимание на свойство box-sizing для parent:

.parent {
    display: flex;
    flex-direction: column;
    padding: 48px;
    box-sizing: border-box;
}

.child {
    width: 100%;
}