CSS kullanarak alt DIV genişliğini üst DIV'den daha geniş yapmanın bir yolu var mı?

Ana konteyner DIV içinde ana DIP'den daha geniş bir alt DIV'ye sahip olmanın bir yolu var mı? Alt DIV'nin tarayıcı görünüm penceresiyle aynı genişlikte olması gerekir.

Aşağıdaki örneğe bakın:

Çocuk DIV , ebeveyn div'in bir çocuğu olarak kalmalıdır . Child div üzerinde keyfi negatif kenar boşlukları ayarlayabileceğimi biliyorum, ancak tarayıcının% 100 genişliğini nasıl esas alacağımı öğrenemiyorum.

Bunu yapabileceğimi biliyorum:

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

Ancak çocuğun dinamik olan tarayıcı ile aynı genişlikte olması gerekir.

Güncelleme

Cevaplarınız için teşekkürler, şimdiye kadar en yakın cevap çocuğun DIV pozisyonunu yapmaktır: mutlak ve sol ve sağ özellikleri 0 olarak ayarlamak.

Bir sonraki sorun, üst konum: göreceli, yani sol ve sağ özellikleri hala tarayıcı değil ana div göreceli olduğu anlamına gelir, burada örnek bakın: jsfiddle.net/v2Tja/2

Diğer her şeyi berbat etmeden ebeveynin akraba pozisyonunu kaldıramıyorum.

Mutlak konumlandırma kullanın

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

Alt öğeyi belge akışında tutan genel bir çözüm:

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

widthAlt öğeyi tüm görüntü alanı genişliğini dolduracak şekilde ayarladık , sonra leftana öğenin genişliğinin% 50'sini eksi görünüm alanının yarısına taşıyarak ekranın kenarını karşılamasını sağlarız .

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>

Vw ve calc () için tarayıcı desteği genellikle IE9 ve daha yeni sürümler olarak görülebilir.

Not: Bu, kutu modelinin ayarlanmış olduğunu varsayar border-box. Olmadan border-box, dolguları ve sınırları çıkarmak zorunda kalacaksınız, bu da bu çözümü bir karmaşa haline getiriyor.

Not: Bazı tarayıcılar taşma olmamasına rağmen yatay bir kaydırma çubuğu görüntülemeyi seçebileceği için kaydırma kabınızın yatay taşmasını gizlemeniz önerilir.

Uzun zamandır bu soruna bir çözüm aradım. İdeal olarak, çocuğun ebeveyninden daha büyük olmasını istiyoruz, ancak ebeveynin kısıtlamalarını önceden bilmeden.

Ve sonunda burada harika bir genel cevap buldum . Kelimesi kelimesine kopyalama:

Buradaki fikir şudur: kapsayıcıyı solda tarayıcı penceresinin tam ortasına doğru itin:% 50;, sonra negatif -50vw marj ile sol kenara geri çekin.

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

Orijinal önerinize (negatif kenar boşlukları ayarlama) dayanarak, dinamik tarayıcı genişliği için yüzde birimleri kullanarak benzer bir yöntem geliştirdim:

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

Negatif kenar boşlukları, içeriğin Ana DIV'den dışarı akmasına izin verecektir. Bu nedenle padding: 0 100%;, içeriği Chlid DIV'nin orijinal sınırlarına geri itmek için ayarladım .

Negatif kenar boşlukları, .child-div öğesinin toplam genişliğini tarayıcının görünüm penceresinden genişleterek yatay bir kaydırmaya neden olur. Bu nedenle overflow-x: hidden, Büyükbaba DIV'ye (Ana Divanın ebeveyni) uygulayarak ekstrüzyon genişliğini kırpmamız gerekir :

İşte JSfiddle

Nils Kaspersson'u denedim left: calc(-50vw + 50%); Safari tarayıcılarının düzgün bir şekilde yapmadığını öğrenene kadar Chrome & FF'de (henüz IE hakkında emin değilim) mükemmel bir şekilde çalıştı. Umarım bu basit yöntemi sevdiğim anda bunu düzelttiler.

Bu, Üst DIV öğesinin olması gereken sorununuzu da çözebilir position:relative

Bu geçici çözüm yönteminin 2 dezavantajı:

• Ek işaretleme gerektirir (yani bir büyükbaba veya büyükanne öğesi (tıpkı iyi ol 'masa dikey hizalama yöntemi gibi değil mi?)
• Child DIV'nin sol ve sağ sınırı, yalnızca tarayıcının görünüm penceresinin dışında oldukları için hiçbir zaman gösterilmez.

Bu yöntemle bulduğunuz herhangi bir sorun varsa lütfen bize bildirin;). Umarım yardımcı olur.

Flexbox , üç satır CSS ile bir çocuğu ebeveyninden daha geniş yapmak için kullanılabilir.

Sadece çocuğun display, margin-leftve widthihtiyaç ayarlanmasına. margin-leftçocuğun bağlıdır width. Formül:

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

Sol kenar boşluğunu manuel olarak hesaplamaktan kaçınmak için CSS değişkenleri kullanılabilir.

Demo # 1: Manuel hesaplama

.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: CSS değişkenlerini kullanma

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

Bunu kullandım:

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

konum deneyebilirsiniz: mutlak. ve genişlik ve yükseklik verin, üst: 'yukarıdan y ekseni' ve sol: 'x ekseni'

Benzer bir sorunum vardı. Alt öğenin içeriğinin, üst öğenin içeriğinde kalması beklenirken, arka planın tam görüntü alanı genişliğini genişletmesi gerekiyordu.

position: relativeAlt öğe yaparak ve bir sözde öğe ( :before) ekleyerek bu sorunu çözdüm position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Sahte öğe, sahte arka plan öğesi olarak gerçek alt öğenin arkasında kalır. Bu tüm tarayıcılarda çalışır (IE8 + ve Safari 6+ bile - eski sürümleri test etme imkanınız yoktur).

Küçük örnek keman: http://jsfiddle.net/vccv39j9/

Nils Kaspersson'un çözümüne ek olarak, dikey kaydırma çubuğunun genişliği için de çözüm buluyorum. 16pxGörünüm bağlantı noktası genişliğinden çıkarılmış bir örnek olarak kullanıyorum . Bu, yatay kaydırma çubuğunun görünmesini önleyecektir.

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

Ebeveynin sabit bir genişliği olduğu, örneğin #page { width: 1000px; }ortalandığı varsayılarak, #page { margin: auto; }çocuğun yapabileceğiniz tarayıcı görünüm penceresinin genişliğine sığmasını istiyorsunuz:

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

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

Alt div'ı içerik kadar geniş yapmak için şunu deneyin:

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

Bu eski olduğunu biliyorum ama bir cevap için bu gelen herkes için böyle yapardı:

Gövde gibi üst öğeyi içeren bir öğeye taşan taşma.

Alt öğenize sayfanızdan çok daha geniş bir genişlik verin ve% -100 oranında mutlak sola yerleştirin.

Heres bir örnek:

body {
  overflow:hidden;
}

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

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

Ayrıca bir JS Fiddle da var: http://jsfiddle.net/v2Tja/288/

O zaman çözüm şu olacaktır.

HTML

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

CSS

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

Bazı çözümlerinizi denedim. Bu :

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

daha iyi bir ekran. Sonuçları göstermek için bir codePen yaptım: Bir arka plan görüntüsü ile bir üst div ve iç içeriği ile bir alt divon div kullandım.

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