为什么内部div容器溢出？

Question

从下面的代码中，

＆＃13;

＆＃13;

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}
.customercardtype {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  position: relative;
  height: 8%;
  margin-top: 5px;
}
.customercardtype .formlabel {
  display: block;
  height: 20%
}
.customercardtype .cardtypecontainer {
  position: absolute;
  width: 100%; /* Any problem here? */
  top: 40%;
  height: 50%;
  border: 1px solid red;
}

＆＃13;

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step3: Card details
  <div class="customercardtype">
    <label class="formlabel">Cardtype:</label>
    <div class="cardtypecontainer">

    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

我想明白，

为什么内部div容器溢出？

Answer 1

这是因为元素的宽度实际上是宽度+左边距+右边距+左边框+右边框。

当你的宽度为100％时，除此之外还会超过100％，使其溢出其父级。

如果你使用box-sizing：border-box，那将解决这个问题。

这是一个快速摘要，更深入的信息在这里：https://css-tricks.com/box-sizing。

Answer 2

它溢出的原因是因为position absolute在视觉上说，将您的元素定位在网站的正常流程之外。如果你正确使用它，这是有意和强大的。但是在您的情况下，cardtypecontainer的父容器未控制绝对定位元素，因此它溢出其容器外。

然后，我将cardtypecontainer更改为relative位置，这将按预期工作，因为relative位置不会更改元素的预期布局。对于您的情况，这意味着，cardtypecontainer将保持在其父容器的范围内。

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}
.customercardtype {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  position: relative;
  height: 8%;
  margin-top: 5px;
}
.customercardtype .formlabel {
  display: block;
  height: 20%
}
.customercardtype .cardtypecontainer {
  position: relative;
  margin-top: 10px;
  width: 100%;
  height: 50%;
  border: 1px solid red;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step3: Card details
  <div class="customercardtype">
    <label class="formlabel">Cardtype:</label>
    <div class="cardtypecontainer">

    </div>
  </div>
</form>