Question

我怎样才能使孩子占据整个页面的宽度

<div class='container'>
   <div class='child'>
            something
   </div>
</div>

.container {
    width: 90%;
    margin: 0 auto;
 }

.child {}

Answer 1

考虑负边距。

.container {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
  background: red;
}

.child {
  height: 50px;
  background: blue;
  margin: 0 calc(-5% / 0.9); 
  /* 
    The container is taking 90% of 100% so we are missing 10%
    we plit this value on both sides (5% + 5%) and since percentage is relative
    to parent so to make the percentage inside .child relative to body
    we divide by the percentage of container
    
    it should be then 5%/0.9 or 5%*1.11
  
  */
}

body {
  margin: 0;
}

<div class='container'>
  <div class='child'>
    something
  </div>
</div>

使用CSS变量，您可以拥有更多动态效果：

.container {
  width: calc(var(--s)*100%);
  margin: 5px auto;
  padding: 10px 0;
  background: red;
}

.child {
  height: 50px;
  background: blue;
  margin: 0 calc((-50% * (1 - var(--s))) / var(--s)); 
}

body {
  margin: 0;
}

<div class='container' style="--s:0.8">
  <div class='child'>
    something
  </div>
</div>

<div class='container' style="--s:0.5">
  <div class='child'>
    something
  </div>
</div>
<div class='container' style="--s:0.2">
  <div class='child'>
    something
  </div>
</div>

如果容器未居中，只需将所有缺少的边距放在一侧：

.container {
  width: calc(var(--s)*100%);
  margin: 5px 0;
  padding: 10px 0;
  background: red;
}

.child {
  height: 50px;
  background: blue;
  margin-right:calc((-100% * (1 - var(--s))) / var(--s)); 
}

body {
  margin: 0;
}

<div class='container' style="--s:0.8">
  <div class='child'>
    something
  </div>
</div>

<div class='container' style="--s:0.5">
  <div class='child'>
    something
  </div>
</div>
<div class='container' style="--s:0.2">
  <div class='child'>
    something
  </div>
</div>

PS：使用vw并不是一个好主意，因为它包括滚动的宽度。这样您就会溢出。

.box {
  height:50px;
  background:red;
  width:100vw;
  border:5px solid green;
  box-sizing:border-box;
}

body {
 margin:0;
 min-height:200vh;
}

<div class="box"></div>

Answer 2

您可以定位子项亲戚和left: 50%，然后将其沿x轴平移-50％，以使其与屏幕边缘重新对齐。之所以有效，是因为left: 50%是父宽度的一半，而transform: translateX(-50%)是元素本身的一半。这依赖于原始容器居中，因此可能无法在所有情况下都起作用。

.container {
  background: gray;
  width: 80%;
  margin: auto;
}

.child {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: red;
}

<div class='container'>
  <div>Centered</div>
  <div class='child'>Something</div>
  <div>Centered</div>
  <div>Centered</div>
  <div>Centered</div>
</div>

当一个div处于宽度为90％的另一个div内时，如何使div占据页面的整个宽度

3 个答案: