Есть ли способ сделать ширину дочернего DIV шире, чем родительский DIV, используя CSS?

более современным решением этого вопроса является использование блока просмотра vw и calc().

установить width дочернего элемента до 100% ширины видового экрана, или 100vw. Затем переместите дочерний элемент на 50% ширины окна просмотра – минус 50%родительский элемент ширина-влево, чтобы он соответствовал краю экрана.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

вот демо.

браузер поддержка vw и calc () обычно можно рассматривать как IE9+.

Примечание: это предполагает, что модель box имеет значение border-box. Без border-box, вам также придется вычесть отступы и границы, что делает это решение беспорядком.

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

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

отрицательные поля позволят содержимому вытекать из родительского DIV. Поэтому я установил padding: 0 100%; чтобы вернуть содержимое к исходным границам CHLID DIV.

негативные маржи тоже будут делать свои .общая ширина дочернего div расширяется из окна просмотра браузера, что приводит к горизонтальной прокрутке. Следовательно, нам нужно обрезать ширину выдавливания, применяя overflow-x: hidden для дедушки и бабушки DIV (который является родителем родительского Div):

здесь JSfiddle

Я уже пробовал Нильса Касперссона left: calc(-50vw + 50%); он отлично работал в Chrome & FF (пока не уверен в IE), пока я не узнал, что браузеры Safari этого не делают правильно. Надеюсь, они исправили это, как только мне действительно нравится этот простой метод.

это также может решить вашу проблему, где родительский элемент DIV должен быть position:relative

2 недостатки этого метода обхода:

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

пожалуйста, дайте мне знать, если есть какие-либо проблемы с этим методом ;). Надеюсь, это поможет.

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

и я, наконец, нашел блестящий общий ответ здесь. Копирование его дословно:

идея здесь заключается в следующем: нажмите контейнер точно в середине окно браузера с левой стороны: 50%;, затем потяните его обратно к левому краю с отрицательными -50vw маржа.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

я использовал этот:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

вы можете попробовать позицию: абсолютная. и дайте ширину и высоту, сверху: "ось y сверху" и слева: 'x-axis'

у меня была аналогичная проблема. Содержимое дочернего элемента должно было оставаться в родительском элементе, в то время как фон должен был расширить полную ширину окна просмотра.

я решил эту проблему, сделав дочерний элемент position: relative и добавление псевдо-элемента (:before) С position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Псевдо-элемент остается за фактическим дочерним элементом в качестве псевдо-фонового элемента. Это работает во всех браузерах (даже IE8+ и Safari 6+ - не имеют возможности тестировать старые версии.)

маленький пример скрипки:http://jsfiddle.net/vccv39j9/

добавляя к решению Нильса Касперссона, я также разрешаю ширину вертикальной полосы прокрутки. Я использую 16px в качестве примера, который вычитается из ширины порта просмотра. Это позволит избежать появления горизонтальной полосы прокрутки.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Я знаю, что это старый, но для тех, кто приходит к этому для ответа вы бы сделали это так:

переполнение скрыто на элементе, содержащем родительский элемент,например тело.

дайте вашему дочернему элементу ширину намного шире, чем ваша страница, и расположите его абсолютно слева на -100%.

вот пример:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

также здесь JS Скрипка:http://jsfiddle.net/v2Tja/288/

предполагая, что родитель имеет фиксированную ширину, например #page { width: 1000px; } и центрируется #page { margin: auto; }, вы хотите, чтобы ребенок соответствовал ширине окна просмотра браузера, которое вы могли бы просто сделать:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

тогда решение будет следующим.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }