Czy istnieje sposób na zwiększenie szerokości dziecięcego DIV-a nadrzędnego za pomocą CSS?

Czy istnieje sposób na umieszczenie podrzędnego DIV wewnątrz rodzica DIV kontenera, który jest szerszy niż jego rodzic? Dziecko DIV musi mieć tę samą szerokość rzutni przeglądarki.

Zobacz przykład poniżej:

DIV dziecka musi pozostać dzieckiem div rodzica. Wiem, że mogę ustawić dowolne ujemne marginesy na div dziecka, aby go poszerzyć, ale nie jestem w stanie dowiedzieć się, jak zasadniczo zwiększyć jego szerokość do 100%.

Wiem, że potrafię to zrobić:

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

Ale potrzebuję, aby dziecko miało taką samą szerokość jak dynamiczna przeglądarka.

Aktualizacja

Dzięki za odpowiedzi, wydaje się, że najbliższą odpowiedzią jest uczynienie pozycji DIV dziecka: absolutną i ustawienie właściwości lewej i prawej na 0.

Kolejnym problemem, jaki mam, jest to, że rodzic ma pozycję: względną, co oznacza, że ​​właściwości lewej i prawej strony są nadal względne w stosunku do rodzica div, a nie przeglądarki, patrz przykład tutaj: jsfiddle.net/v2Tja/2

Nie mogę usunąć pozycji względem rodzica bez zepsucia wszystkiego innego.

Użyj pozycjonowania bezwzględnego

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

Oto ogólne rozwiązanie, które utrzymuje element potomny w obiegu dokumentów:

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

Ustawiamy widthelement podrzędny tak, aby wypełniał całą szerokość rzutni, a następnie dostosowujemy go do krawędzi ekranu, przesuwając go na leftodległość połowy rzutni, minus 50% szerokości elementu nadrzędnego.

Próbny:

* {
  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>

Obsługa przeglądarek dla vw i calc () można ogólnie postrzegać jako IE9 i nowsze wersje.

Uwaga: Zakłada się, że model pudełkowy jest ustawiony na border-box. Bez tego border-boxmusiałbyś również odjąć wypełnienia i obramowania, co spowodowałoby bałagan w tym rozwiązaniu.

Uwaga: Zaleca się ukrywanie poziomego przepełnienia przewijanego kontenera, ponieważ niektóre przeglądarki mogą wyświetlać poziomy pasek przewijania, mimo że nie występuje przepełnienie.

Długo szukałem rozwiązania tego problemu. Idealnie chcielibyśmy mieć dziecko większe niż rodzic, ale nie znając z góry ograniczeń rodzica.

I w końcu znalazłem genialną ogólną odpowiedź tutaj . Kopiowanie go dosłownie:

Chodzi o to: popchnij pojemnik dokładnie do środka okna przeglądarki lewym przyciskiem: 50% ;, następnie pociągnij go z powrotem do lewej krawędzi z ujemnym marginesem -50vw.

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

W oparciu o twoją sugestię oryginalną sugestię (ustawienie ujemnych marginesów), próbowałem i opracowałem podobną metodę przy użyciu jednostek procentowych dla dynamicznej szerokości przeglądarki:

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;
    }

Ujemne marginesy pozwolą na wypływ zawartości z Parent DIV. Dlatego ustawiłempadding: 0 100%; aby przesuwać zawartość z powrotem do pierwotnych granic Chlid DIV.

Ujemne marginesy spowodują również, że całkowita szerokość .child-div rozszerzy się z okienka przeglądarki, co spowoduje przewijanie w poziomie. Dlatego musimy przyciąć szerokość wytłaczania poprzez zastosowanie overflow-x: hiddenDIV do Dziadka (który jest rodzicem Div Dywizji):

Oto JSfiddle

Próbowałem Nils Kaspersson left: calc(-50vw + 50%) ; działało idealnie w Chrome i FF (jeszcze nie jestem pewien co do IE), dopóki nie dowiedziałem się, że przeglądarki Safari nie robią tego poprawnie. Mam nadzieję, że naprawili to wkrótce, jak mi się podoba ta prosta metoda.

Może to również rozwiązać problem, w którym musi znajdować się element Parent DIV position:relative

Dwie wady tej metody obejścia:

• Wymagaj dodatkowego znacznika (tj. Elementu dziadka (tak jak w przypadku dobrej, pionowej metody wyrównywania w pionie tabeli, prawda?)
• Lewa i prawa krawędź Child DIV nigdy się nie pokaże, po prostu dlatego, że znajdują się poza oknem przeglądarki.

Daj mi znać, jeśli znajdziesz jakiś problem z tą metodą;). Mam nadzieję, że to pomoże.

Flexbox może być użyty do uczynienia dziecka szerszym niż jego rodzic za pomocą trzech linii CSS.

Tylko dziecka display, margin-lefta widthbyć ustawione potrzeba. margin-leftzależy od dziecka width. Formuła jest następująca:

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

Zmiennych CSS można użyć, aby uniknąć ręcznego obliczania lewego marginesu.

Demo # 1: Obliczenia ręczne

.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>

Demo # 2: Używanie zmiennych 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>

Użyłem tego:

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;
}

możesz wypróbować pozycję: absolutną. i podaj szerokość i wysokość, góra: „oś y od góry” i lewa strona: „oś x”

Miałem podobny problem. Zawartość elementu potomnego miała pozostać w elemencie macierzystym, podczas gdy tło musiało rozszerzyć pełną szerokość rzutni.

Rozwiązałem ten problem, tworząc element potomny position: relativei dodając do niego pseudo element ( :before) position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Pseudo element pozostaje za faktycznym dzieckiem jako pseudo element tła. Działa to we wszystkich przeglądarkach (nawet IE8 + i Safari 6+ - nie mają możliwości testowania starszych wersji).

Małe przykładowe skrzypce: http://jsfiddle.net/vccv39j9/

Dodając do rozwiązania Nils Kasperssona, decyduję się również na szerokość pionowego paska przewijania. Używam 16pxjako przykładu, który jest odejmowany od szerokości portu widoku. Pozwoli to uniknąć wyświetlania poziomego paska przewijania.

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

Zakładając, że rodzic ma stałą szerokość, np. #page { width: 1000px; }I jest wyśrodkowany #page { margin: auto; }, chcesz, aby dziecko pasowało do szerokości okna przeglądarki, co możesz po prostu zrobić:

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

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

Aby div dziecka był tak szeroki jak treść, spróbuj tego:

.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;
}

Wiem, że to jest stare, ale dla każdego, kto przyjdzie do tego po odpowiedź, zrobiłbyś to tak:

Przepełnienie ukryte w elemencie zawierającym element nadrzędny, takim jak ciało.

Podaj elementowi dziecemu szerokość znacznie szerszą niż strona i ustaw go bezwzględnie w lewo o -100%.

Oto przykład:

body {
  overflow:hidden;
}

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

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

Oto także JS Fiddle: http://jsfiddle.net/v2Tja/288/

Następnie rozwiązanie będzie następujące.

HTML

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

CSS

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

Wypróbowałem niektóre z twoich rozwiązań. Ten :

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

jest zdecydowanie najlepszy, ponieważ nie potrzebujemy dodatkowego css dla mniejszego ekranu. Zrobiłem codePen, aby pokazać wyniki: Użyłem div div rodzica z obrazem tła i div div dziecka z treścią wewnętrzną.

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