Как получить div, чтобы растянуть ширину экрана за пределами его содержимого div?

Question

Проблемы с получением черной полосы в нижней части ползунка для растягивания на весь экран. Он работает слева, но правая сторона обрезана на краю контейнера. Используя мастер-слайдер, если это относительная информация. Любые советы о том, как я могу получить этот черный бар, чтобы растянуться на всем пути?

http://designatwork.net/51fifteen/

Answer 1

Несколько классов, как ms-slide-layers, ms-inner-controls-cont и ms-layer имеют жёстко значения left, width и, самое ограничение в этом случае, max-width.

Я думаю, что в этом случае выиграет от использования видовых ширин блока, vw установки width: 100vw; вы говорите, что это будет шириной всего окна просмотра.

Кроме того, вам не нужны padding и margin в 9999px. Вы можете position: absolute слоя, у вас есть bottom: 0, а затем используйте разумные padding и выровняйте текст в соответствии с вашими требованиями, чтобы получить лучший, чистый результат.

Answer 2

Сначала установите положение (ничего, кроме статического) на его родительский элемент. Затем установите абсолютное положение черной полосы. Таким образом, он будет относиться к его ближайшему родительскому элементу, который содержит позицию. Затем растяните его либо с использованием свойств высоты и ширины, либо с помощью направленных позиций (сверху, снизу, слева, справа). Если вы используете направления, то используйте одновременно левое и правое, а черная полоса будет расширяться по экрану.

Answer 3

Чтобы устранить проблему

1. Удалить tranform свойство из сНа, имеющего класса ms-slide ms-sl-selected
2. Удалить width свойство из DIV, имеющий класс ms-layer. Как ДИВ абсолютно позиционирован, установите left и right значения 0, чтобы сделать его полную ширину
3. Удалить max-width и left из DIV с классом ms-slide-layers также

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