У меня есть HTML-страница, где тег body имеет CSS padding-left и padding-right. Я бы хотел, чтобы нижний колонтитул страницы был на 100% шириной страницы, но без наложения тела. Есть ли хороший/простой способ сделать это?
Как сделать ширину div 100%, когда у родительского тега есть отступы?
Ответ 1
Вы можете применить отрицательный запас к внутреннему контейнеру, чтобы отменить добавление
<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </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%;
}