มีวิธีที่จะทำให้ความกว้างของ DIV ลูกกว้างกว่า DIV หลักโดยใช้ CSS หรือไม่?

มีวิธีที่จะมีลูก DIV ในคอนเทนเนอร์หลัก DIV ที่กว้างกว่าพาเรนต์หรือไม่ DIV ลูกต้องเป็นความกว้างเท่ากันของวิวพอร์ตเบราว์เซอร์

ดูตัวอย่างด้านล่าง:

DIV ลูกจะต้องอยู่ในฐานะลูกของผู้ปกครอง ฉันรู้ว่าฉันสามารถตั้งค่าระยะขอบลบโดยพลการบน div เด็กเพื่อให้กว้างขึ้น แต่ฉันไม่สามารถหาวิธีทำให้ความกว้าง 100% ของเบราว์เซอร์เป็นหลัก

ฉันรู้ว่าฉันสามารถทำสิ่งนี้:

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

แต่ฉันต้องการให้เด็กมีความกว้างเท่ากับเบราว์เซอร์ที่เป็นแบบไดนามิก

ปรับปรุง

ขอบคุณสำหรับคำตอบของคุณดูเหมือนว่าคำตอบที่ใกล้ที่สุดคือการทำให้ตำแหน่ง DIV ของเด็ก: สัมบูรณ์และตั้งค่าคุณสมบัติซ้ายและขวาเป็น 0

ปัญหาต่อไปที่ฉันมีคือผู้ปกครองมีตำแหน่ง: ญาติซึ่งหมายความว่าคุณสมบัติด้านซ้ายและขวายังคงสัมพันธ์กับผู้ปกครอง div และไม่ใช่เบราว์เซอร์ดูตัวอย่างที่นี่: 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;
    }

ระยะขอบติดลบจะทำให้เนื้อหาไหลออกจาก Parent DIV ดังนั้นฉันตั้งค่าpadding: 0 100%;ให้ส่งเนื้อหากลับไปที่ขอบเขตดั้งเดิมของ Chlid DIV

ระยะขอบลบจะทำให้ความกว้างทั้งหมดของ. child-div ขยายออกจากวิวพอร์ตของเบราว์เซอร์ทำให้เลื่อนในแนวนอน ดังนั้นเราจำเป็นต้องคลิปความกว้างของการอัดรีดโดยการใช้overflow-x: hiddenกับ Grandparent DIV (ซึ่งเป็นพาเรนต์ของ parent Div):

นี่คือJSfiddle

ฉันได้ลองของ Nils Kaspersson left: calc(-50vw + 50%)แล้ว มันทำงานได้ดีอย่างสมบูรณ์ใน Chrome & FF (ยังไม่แน่ใจเกี่ยวกับ IE) จนกระทั่งฉันพบเบราว์เซอร์ Safari ไม่ทำงานอย่างถูกต้อง หวังว่าพวกเขาจะแก้ไขปัญหานี้ทันทีที่ฉันชอบวิธีการง่ายๆนี้

สิ่งนี้อาจแก้ไขปัญหาของคุณได้ที่องค์ประกอบ DIV หลัก position:relative

2 ข้อเสียของวิธีแก้ปัญหานี้คือ:

• ต้องการมาร์กอัปพิเศษ (เช่นองค์ประกอบที่เป็นปู่ย่าตายาย (เช่นเดียวกับวิธีการจัดตำแหน่งแนวดิ่งที่ดีของตารางไม่ใช่ใช่ ... )
• ขอบด้านซ้ายและขวาของ Child 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/

การเพิ่มโซลูชันของ Nils Kaspersson ฉันกำลังแก้ไขความกว้างของแถบเลื่อนแนวตั้งเช่นกัน ฉันใช้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;
}

หากต้องการทำให้ div เด็กเป็นเนื้อหาให้ลอง:

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

นอกจากนี้ยังมีซอ 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 พิเศษสำหรับหน้าจอขนาดเล็ก ฉันสร้าง codePen เพื่อแสดงผลลัพธ์: ฉันใช้ div div ที่มีภาพพื้นหลังและ div div div ที่มีเนื้อหาภายใน

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