Абсолютное позиционирование, игнорирующее заполнение родительского элемента

Как вы создаете элемент с абсолютным позиционированием для заполнения своего родителя? Я хочу, чтобы внутренний div растягивался по ширине своего родителя и располагался внизу этого родителя, в основном нижний колонтитул. Но ребенок должен уважать дополнение родителя, и он этого не делает. Ребенок прижимается вплотную к краю родителя.

Итак, я хочу это:

но я получаю следующее:

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

Я могу сделать это с запасом вокруг внутреннего div, но я бы предпочел не добавлять это.

Ответ 1

Во-первых, давайте посмотрим, почему это происходит.

Причина заключается в том, что, неожиданно, когда в поле есть position: absolute, его поле содержит поле родительского заполнения (то есть поле вокруг его заполнения). Это удивительно, потому что обычно (т.е. При использовании статического или относительного позиционирования) поле ввода - это поле родительского содержимого.

Вот соответствующая часть спецификации CSS:

В случае, когда предок является встроенным элементом, содержащий блок является ограничивающим прямоугольником вокруг полей заполнения первого и последнего встроенных полей, сгенерированных для этого элемента. В противном случае содержащий блок формируется с помощью край заполнения предка.

Самый простой подход - как предлагается в зимнем ответе - использовать padding: inherit на абсолютно позиционированном div. Это работает, однако, если вы не хотите, чтобы абсолютно позиционированный div имел любое дополнительное дополнение. Я думаю, что наиболее универсальные решения (в том, что оба элемента могут иметь собственное независимое дополнение):

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

Недостатком, конечно же, является то, что вы возитесь с HTML просто для презентационных целей.
Повторите дополнение (или добавьте его) на абсолютно позиционированный элемент.

Недостатком здесь является то, что вы должны повторять значения в своем CSS, что является хрупким, если вы пишете CSS напрямую. Однако, если вы используете инструмент предварительной обработки, например SASS или LESS, вы можете избежать этой проблемы, используя переменную. Это метод, который я лично использую.

Ответ 2

Одна вещь, которую вы могли бы попробовать, - использовать следующий css:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

Он позволяет дочернему элементу наследовать отладку от родителя, а затем дочерний элемент может быть расположен в соответствии с родительским widht и дополнением.

Кроме того, я использую box-sizing: border-box; для задействованных элементов.

Я не тестировал это во всех браузерах, но, похоже, работает в Chrome, Firefox и IE10.

Ответ 3

Ну, это может быть не самое элегантное решение (семантически), но в некоторых случаях оно будет работать без каких-либо недостатков: вместо заполнения используйте прозрачную рамку для родительского элемента. Абсолютно позиционированные дочерние элементы будут соблюдать границу, и она будет отображаться точно так же (за исключением того, что вы используете границу родительского элемента для стилизации).

Ответ 4

Вот мой лучший снимок. Я добавил еще один Div и сделал его красным и изменил родительскую высоту на 200 пикселей, чтобы проверить его. Идея заключается в том, что теперь ребенок становится внуком, а родитель становится бабушкой и дедушкой. Поэтому родитель уважает своего родителя. Надеюсь, ты получишь мою идею.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

Edit:

Я думаю, что то, что вы пытаетесь сделать, не может быть сделано. Абсолютное положение означает, что вы собираетесь дать ему координаты, которые он должен соблюдать. Что делать, если родительский элемент имеет отступы 5px. И вы полностью позиционируете ребенка в top: -5px; left: -5px. Как предполагается, что вы должны уважать родителя и вас в то же время?

Мое решение

Если вы хотите, чтобы он почитал родителя, не ставьте его на место.

Ответ 5

Используйте поле вместо заполнения в родительском div: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

Ответ 6

1.) вы не можете использовать большую границу для родителя - если вы хотите иметь определенную границу

2.) вы не можете добавить margin - в случае, если ваш родитель является частью какого-либо другого контейнера, и вы хотите, чтобы ваш родитель взял всю ширину этого великого родителя.

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

В вашем случае:

.css-sux{
  padding: 0px 10px 10px 10px;
}

Ответ 7

Может быть легко сделано с использованием дополнительного уровня Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Демо: https://jsfiddle.net/soxv3vr0/