Apakah ada cara untuk membuat lebar DIV anak lebih lebar daripada DIV induk menggunakan CSS?

Apakah ada cara untuk memiliki DIV anak di dalam wadah induk DIV yang lebih luas dari induknya. Anak DIV harus memiliki lebar yang sama dari viewport browser.

Lihat contoh di bawah ini:

DIV anak harus tetap sebagai anak dari div induk. Saya tahu saya dapat mengatur margin negatif sewenang-wenang pada div anak untuk membuatnya lebih luas tetapi saya tidak tahu bagaimana dasarnya membuatnya 100% lebar browser.

Saya tahu saya bisa melakukan ini:

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

Tetapi saya membutuhkan anak untuk memiliki lebar yang sama dengan browser yang dinamis.

Memperbarui

Terima kasih atas jawaban Anda, sepertinya jawaban terdekat sejauh ini adalah membuat posisi DIV anak: absolut, dan setel properti kiri dan kanan ke 0.

Masalah berikutnya yang saya miliki adalah bahwa induk memiliki posisi: relatif, yang berarti bahwa properti kiri dan kanan masih relatif terhadap div induk dan bukan browser, lihat contoh di sini: jsfiddle.net/v2Tja/2

Saya tidak dapat menghapus posisi relatif dari orang tua tanpa mengacaukan segalanya.

Gunakan posisi absolut

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

Berikut adalah solusi umum yang membuat elemen turunan dalam aliran dokumen:

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

Kami mengatur width elemen anak untuk mengisi seluruh lebar viewport, lalu kami membuatnya memenuhi tepi layar dengan memindahkannya ke leftjarak setengah viewport, minus 50% dari lebar elemen induk.

Demo:

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

Dukungan browser untuk vw dan untuk calc () umumnya dapat dilihat sebagai IE9 dan yang lebih baru.

Catatan: Ini mengasumsikan model kotak diatur ke border-box. Tanpaborder-box , Anda juga harus mengurangi bantalan dan batas, membuat solusi ini berantakan.

Catatan: Sebaiknya sembunyikan limpahan horizontal wadah gulir Anda, karena browser tertentu dapat memilih untuk menampilkan bilah gulir horizontal meskipun tidak ada limpahan.

Saya telah mencari solusi untuk masalah ini sejak lama. Idealnya kita ingin memiliki anak lebih besar dari orang tua, tetapi tanpa mengetahui kendala dari orang tua sebelumnya.

Dan akhirnya saya menemukan jawaban umum yang brilian di sini . Menyalinnya kata demi kata:

Idenya di sini adalah: dorong wadah ke tengah tepat dari jendela browser dengan kiri: 50% ;, lalu tarik kembali ke tepi kiri dengan margin -50vw negatif.

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

Berdasarkan saran asli saran Anda (pengaturan margin negatif), saya telah mencoba dan menghasilkan metode serupa menggunakan satuan persentase untuk lebar browser dinamis:

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

Margin negatif akan membuat konten mengalir keluar dari DIV Induk. Oleh karena itu saya mengaturpadding: 0 100%; untuk mendorong konten kembali ke batas asli DIV Chlid.

Margin negatif juga akan membuat lebar total .child-div meluas dari viewport browser, menghasilkan gulir horizontal. Oleh karena itu kita perlu memotong lebar ekstrusi dengan menerapkanoverflow-x: hidden ke DIV kakek-nenek (yang merupakan induk dari Div Induk):

Ini JSfiddle

Saya mencoba Nils Kaspersson left: calc(-50vw + 50%) ; itu bekerja dengan sangat baik di Chrome & FF (belum yakin tentang IE) sampai saya tahu browser Safari tidak melakukannya dengan benar. Semoga mereka memperbaikinya segera setelah saya benar-benar menyukai metode sederhana ini.

Ini juga dapat menyelesaikan masalah Anda di mana elemen DIV Induk harus position:relative

2 kelemahan dari metode penyelesaian masalah ini adalah:

• Membutuhkan markup tambahan (yaitu elemen kakek-nenek (seperti metode penyelarasan tabel vertikal yang baik bukan ...)
• Perbatasan kiri dan kanan DIV Anak tidak akan pernah ditampilkan, hanya karena mereka berada di luar viewport browser.

Harap beri tahu saya jika ada masalah dengan metode ini;). Semoga ini bisa membantu.

Flexbox dapat digunakan untuk membuat anak lebih luas dari induknya dengan tiga baris CSS.

Hanya anak display, margin-leftdan widthperlu diatur. margin-lefttergantung pada anak width. Rumusnya adalah:

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

Variabel CSS dapat digunakan untuk menghindari penghitungan margin kiri secara manual.

Demo # 1: Perhitungan manual

.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: Menggunakan variabel 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>

Saya menggunakan ini:

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

Anda dapat mencoba posisi: absolut. dan beri lebar dan tinggi, atas: 'sumbu y dari atas' dan kiri: 'sumbu x'

Saya punya masalah serupa. Konten elemen anak seharusnya tetap di elemen induk sementara latar belakang harus memperluas lebar viewport penuh.

Saya mengatasi masalah ini dengan membuat elemen turunan position: relativedan menambahkan elemen pseudo ( :before) ke dalamnya position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Elemen pseudo tetap berada di belakang anak yang sebenarnya sebagai elemen latar belakang semu. Ini berfungsi di semua browser (bahkan IE8 + dan Safari 6+ - tidak memiliki kemungkinan untuk menguji versi yang lebih lama).

Contoh biola kecil: http://jsfiddle.net/vccv39j9/

Menambahkan ke solusi Nils Kaspersson, saya memutuskan untuk lebar scrollbar vertikal juga. Saya menggunakan 16pxsebagai contoh, yang dikurangi dari lebar view-port. Ini akan menghindari bilah gulir horizontal muncul.

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

Dengan asumsi orang tua memiliki lebar tetap, misalnya #page { width: 1000px; }dan berpusat #page { margin: auto; }, Anda ingin anak tersebut sesuai dengan lebar viewport browser yang bisa Anda lakukan:

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

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

Untuk membuat div anak selebar konten, coba ini:

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

Saya tahu ini sudah tua tetapi bagi siapa pun yang datang untuk jawaban ini Anda akan melakukannya seperti ini:

Overflow disembunyikan pada elemen yang mengandung elemen induk, seperti tubuh.

Berikan elemen anak Anda lebar lebih lebar dari halaman Anda, dan posisikan absolutnya hingga -100%.

Inilah sebuah contoh:

body {
  overflow:hidden;
}

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

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

Juga ada JS Fiddle: http://jsfiddle.net/v2Tja/288/

Maka solusinya adalah sebagai berikut.

HTML

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

CSS

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

Saya mencoba beberapa solusi Anda. Yang ini :

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

sejauh ini yang terbaik, karena kita tidak perlu css tambahan untuk layar yang lebih kecil. Saya membuat codePen untuk menunjukkan hasilnya: Saya menggunakan div induk dengan gambar latar belakang, dan div div anak dengan konten dalam.

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