Как я могу расширить фон элемента за пределы его контейнера?

Question

У меня есть div, который содержит тег h3, и я хочу, чтобы фон h3 простирался за пределы тега div до края страницы. Есть ли способ сделать это в CSS?
Я подумал об абсолютном расположении h3, но я не знаю размер от края экрана до края div (где я хочу, чтобы он был), поскольку div центрирован.

Answer 1

На этой странице я использовал Firebug для изменения названия заголовка вопроса.

#question-header h2 {
    background:lime;
    margin-bottom:-1000px;
    padding-bottom:1000px;
}

Вот что произошло:
_{(источник: zastica.com )}

Существует # вопросный заголовок div, который распространяется только на верхнюю часть вопроса («У меня есть div ...»). Ключ имеет большое нижнее заполнение и большое (отрицательное) нижнее поле.

Это также работает для фоновых изображений. Вы просто должны убедиться, что в контейнере не установлен overflow: hidden.

Изменить: Чтобы получить этот эффект влево и вправо, установите:

html {
    overflow-x: hidden;
}

#question-header h2 {
    padding: 0 1500px;
    margin: 0 -1500px;
}

html { overflow-x: hidden; } предотвращает увеличение ширины страницы из-за заполнения.

Answer 2

К сожалению, то, что вы пытаетесь сделать, невозможно с простым CSS, так как вам нужно знать расстояние до правого края. Абсолютное позиционирование тогда работало бы просто отлично. Конечно, вы можете сделать это легко, используя некоторый JavaScript, и еще проще, если используете jQuery:

$(function() {
    $('h3').each(function() {
        $(this).width($(window).width() - $(this).offset().left);
    });
});

И в CSS:

h3 {
    position: absolute;
    ...
}

Answer 3

Фон элементов не может выходить за пределы ограничивающей рамки.

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

Похоже, вы можете просто реорганизовать свой HTML, чтобы сделать это возможным.