如何使浏览器视口的子div全宽忽略父级的位置（边距和填充）和宽度[重复]

Question

This image describes the story. I want to make purple div same as green div . 有人可以解释一下如何在父级的边距和填充未知的情况下使子级 div 全宽吗？

<div class="parent">
   <div class="child1">
   </div>
   <div class="child2">
   </div>
</div>

我主要是坚持调整子 div 的边距和内边距。

注意：父 div 的宽度是边距和内边距未知 plz checkout the image red portion is parent and purple color is child, I want the purpule portion come out and take the full width of viewport

Answer 1

您可以在 CSS 中使用 width: 100%;。

.child1 {
width: 100%;
}

<div class="child1"></div>

Answer 2

block-level element 总是从新行开始并占据可用的全部宽度

如果父容器有内边距，子容器仍然只能占用内容区域内剩余的可用空间。

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
}

.child {
  background: #7C73A5;
}

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

---

如果您知道父容器的填充量，您可以对子容器应用负的左右边距（相同的量）。这在 CSS 框架网格系统中很常见。

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  
}

.child {
  background: #7C73A5;
  margin-left: -10px;
  margin-right: -10px;
}

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

---

如果你不知道父填充但只有一个子，你可以使用position: absolute; left: 0; right: 0，只要父被定位。

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  position: relative;
}

.child {
  background: #7C73A5;
  position: absolute;
  left: 0;
  right: 0;
}

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

现在，当您希望孩子全屏显示时，您现在可以在 absolute 和 fixed 之间切换以将其从一种状态切换到另一种状态。

$(".children").click(function() {
  $(this).toggleClass("is-fixed")
});

body {
  margin: 0;
}

.parent {
  padding: 10px;
  margin: 20px;
  background: #FB061B;
  position: relative;
  height: 100px;
}

.children {
  background: #7C73A5;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.is-fixed {
  top: initial;
  background: green;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="children">
    click to toggle between absolute/fixed
    <div>child1</div>
    <div>child2</div>
    <div>child3</div>
  </div>
</div>