Помещение 100% ширины div внутри контейнера содержимого страницы в WordPress

Question

Я думаю, что этот вопрос в равной степени относится к CSS и WordPress. Я использую Bootstrap, но это не обязательно относится к проблеме.

У меня есть проект, который требует полного раздела ширины (изображение полной ширины с текстом) в середине страницы WordPress. Эта схема в основном описывает расположение:

http://postimg.org/image/xls5kg9yf/

верхние и нижние колонтитулы в сером цвете, полная ширина. Содержимое страницы (в желтом цвете) находится внутри контейнера Boostrap с максимальной шириной 1170 пикселей. Красная секция представляет полный div с изображением и текстом, которые необходимо вставить в середине содержимого страницы.

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

position: absolute; не будет работать, потому что изображение должно оставаться в потоке страницы. Кроме того, столбцы Boostrap используют position: relative, поэтому он просто позиционирует себя относительно родительского столбца, который находится внутри контейнера, и, следовательно, не будет на 100% ширины.

я мог бы использовать margin-left: -9999px & margin-right: -9999px (или любой другой номер), чтобы сделать его ширина 100%, но если эти поля не точно равна ширине окна - ширина контейнера, то фоновое изображение будет растягиваться далеко за 100%.

Единственное возможное решение, которое я могу придумать, это использовать jQuery для получения ширины окна, а затем установить ширину раздела так же, как и окно, с отрицательным левым полем, равным (ширина окна - ширина контейнера)/2 ,

Так, например, если окно было 1400px в ширину и контейнер 1170px то полная ширина секции будет установить с помощью сценария для:

.full-width-section { 
    width: 1400px; 
    margin-left: -115px; 
} 

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

Вот соответствующий CSS и HTML для справки:

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     [page content, <?php the_content(); ?> is here on the page template] 
     <div class="full-width-section"></div> 
     [more page content] 
    </div> 
    </div> 

CSS:

.container { 
    width: 1170px; 
} 

.col-xs-12 { 
    width: 100%; 
    position: relative; 
} 

Answer 1

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

Это, конечно, не похоже на лучшую практику, но между этой или сложной альтернативой jQuery это был более простой способ.

Answer 2

Jquery может быть решением. Как это происходит с margin-left: -100% ;?

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

Answer 3

Если вам не нужна поддержка IE8, есть альтернативное решение. Это не требует каких-либо изменений в разметке, используя абсолютное позиционирование или jQuery.

Вместо этого вы можете использовать функцию css calc() и единицы просмотра, чтобы применить правый отрицательный запас и отступы.

Я сделал пример @http://codepen.io/manuszep/pen/pvqqwp/

Отрицательное левое поле рассчитывается следующим образом:

margin-left: calc(((-100vw + 960px)/2) - 20px); 

, где 960px ширина страницы и 20px является заполнение контейнеров

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

padding-right: calc(((100vw - 960px)/2) + 20px); 
padding-left: calc(((100vw - 960px)/2) + 20px); 

Таким образом, ваш фон div составляет 100% ширины окна просмотра, но его содержимое в точности такое же широкое, как ваш контейнер.

Я пробовал это с шириной контейнера в%, но это не сработало.