子div的宽度大于父div的宽度 [英] width of child div is larger than parent

问题描述

我需要我的孩子div贴在父div的底部，因此position: absolute和bottom: 0px.我还需要子级的宽度与父级的宽度相同，我认为box-sizing: border-box可以工作，但是由于填充和边距，子级的宽度仍向右突出.

I need my child div to stick to the bottom of the parent div, hence the position: absolute and bottom: 0px. I also need the child width to be the same as the parent, and I thought box-sizing: border-box would work, but the width of the child still protrudes to the right, due to the padding and margins.

我该如何解决?

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.child {
  padding: 10px 10px 10px 10px;
  margin: 10px 10px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
}

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

在JSFiddle上查看

推荐答案

使用left:0/right:0而不是width:100%以避免由于边距引起的溢出，因为您的元素实际占用500px + 20px(边距为/右)在父元素中.

Use left:0/right:0 instead of width:100% to avoid overflow due to margin as actually your element is taking 500px + 20px(of margin left/right) inside the parent element.

请注意，box-sizing: border-box可以正常工作，但是内部元素，因此在宽度中包括了填充，但空白处当然没有:

As a side note, box-sizing: border-box is working perfectly but inside the element so padding are included in the width but margin of course not:

border-box告诉浏览器说明任何 border ，并且 在您为宽度和高度指定的值中填充 ... ^参考

border-box tells the browser to account for any border and padding in the values you specify for width and height ... ^ref

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.child {
  padding: 10px 10px 10px 10px;
  margin: 10px 10px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
}

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

这篇关于子div的宽度大于父div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！