How Can I Make a Child DIV Wider Than Its Parent Using CSS?

Extending Child DIV Width Beyond Parent Boundaries with CSS

Expanding a child DIV's width outside its parent container is feasible using CSS. This enables the child DIV to stretch across the entire browser viewport.

Generic Solution

To achieve this, employ the following CSS properties on the child element:

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

• width: 100vw; sets the child's width to 100% of the viewport, spanning the full browser window.
• position: relative; ensures the child's positioning is relative to its parent, allowing for adjustments.
• left: calc(-50vw 50%); offsets the child's left edge by 50% of the viewport minus 50% of the parent's width, aligning it with the browser's left boundary.

Example

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

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

This example creates a 400px wide parent DIV and a child DIV that extends the entire viewport width.

The above is the detailed content of How Can I Make a Child DIV Wider Than Its Parent Using CSS?. For more information, please follow other related articles on the PHP Chinese website!