Чи є спосіб зробити ширину дитини DIV ширшою від батьківської DIV за допомогою CSS?

Чи є спосіб мати дитину DIV у батьківському контейнері DIV, який ширший, ніж у батьків. Дочірнє DIV має бути однакової ширини вікна перегляду браузера.

Дивіться приклад нижче:

Дитина DIV повинна залишатися дитиною батьківського діва. Я знаю, що я можу встановити довільну відмінність на дочірньому поділі, щоб зробити його ширшим, але я не можу розробити, як по суті зробити його на 100% шириною браузера.

Я знаю, що можу це зробити:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Але мені потрібно, щоб дитина була такої ж ширини, як і динамічний браузер.

Оновлення

Дякуємо за ваші відповіді, здається, що найближча відповідь поки що - це зробити позицію дитини DIV: абсолютною, а ліві та праві властивості встановити на 0.

Наступна проблема, яка є у мене, полягає в тому, що батьківський параметр має позицію: relativno, це означає, що ліві та праві властивості все ще відносяться до батьківського діва, а не до браузера, див. Приклад тут: jsfiddle.net/v2Tja/2

Я не можу видалити позицію щодо батьків, не накручуючи все інше.

Використовуйте абсолютне позиціонування

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Ось загальне рішення, яке зберігає дочірній елемент у документообігу:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Встановлюємо widthдочірній елемент для заповнення всієї ширини огляду, потім проводимо його до краю екрану, переміщуючи його на leftвідстань, що становить половину огляду, мінус 50% ширини батьківського елемента.

Демонстрація:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Підтримка браузера для vw та calc () зазвичай може розглядатися як IE9 та новіші.

Примітка. Це передбачає, що модель коробки встановлена ​​на border-box. Без цього border-boxвам також доведеться віднімати прокладки і бордюри, роблячи це рішення безладним.

Примітка. Рекомендується приховати горизонтальний перелив контейнера прокрутки, оскільки деякі веб-переглядачі можуть вибрати горизонтальну панель прокрутки, незважаючи на відсутність переповнення.

Я довго і широко шукав рішення цієї проблеми. В ідеалі ми хочемо, щоб дитина була більшою за батьківську, але не знаючи обмежень батьків заздалегідь.

І я нарешті -то знайшов блискучий загальний відповідь тут . Копіюючи його дослівно:

Ідея тут полягає в тому, щоб посунути контейнер до точної середини вікна браузера зліва: 50%;, потім відтягнути його назад до лівого краю з від’ємним запасом -50vw.

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

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

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.

Негативні поля також дозволять збільшити загальну ширину .child-div поза вікном перегляду браузера, що призведе до горизонтальної прокрутки. Отже, нам потрібно обрізати ширину витискування, застосувавши overflow-x: hiddenдо Діда Дідуся (який є батьком Батька Діви):

Ось JSfiddle

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

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

2 недоліки цього способу вирішення:

• Потрібна додаткова розмітка (тобто елемент бабусі і дідуся (як і метод хорошого вертикального вирівнювання таблиці ol 'чи не так ...)
• Ліва і права межа дочірнього DIV ніколи не відображатиметься, просто тому, що вони знаходяться поза вікном перегляду браузера.

Будь ласка, дайте мені знати, чи є якісь проблеми з цим методом;). Сподіваюся, це допомагає.

Flexbox можна використовувати, щоб зробити дитину ширшою, ніж її батько, за допомогою трьох ліній CSS.

Тільки дитина display, margin-leftі її widthпотрібно встановити. margin-leftзалежить від дитини width. Формула така:

margin-left: calc(-.5 * var(--child-width) + 50%);

Змінні CSS можна використовувати, щоб уникнути обчислення лівого поля вручну.

Демонстраційний номер 1: Розрахунок вручну

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Демонстрація №2: Використання змінних CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Я використав це:

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-ось '

У мене було подібне питання. Вміст дочірнього елемента повинен був залишатися в батьківському елементі, тоді як фон повинен був збільшити повну ширину області перегляду.

Я вирішив цю проблему, зробивши дочірній елемент 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));

Якщо припустити, що батько має фіксовану ширину, наприклад #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;
}

Щоб зробити дитячий поділ таким широким, як вміст, спробуйте:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.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 Fiddle: http://jsfiddle.net/v2Tja/288/

Тоді рішення буде наступним.

HTML

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

CSS

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

Я спробував деякі ваші рішення. Ось цей :

margin: 0px -100%;
padding: 0 100%;

- це безумовно найкраще, оскільки нам не потрібні додаткові css для менших екранів. Я зробив кодPen, щоб показати результати: я використав батьківський div з фоновим зображенням і дочірній дивон div з внутрішнім вмістом.

https://codepen.io/yuyazz/pen/BaoqBBq