绝对定位元素width:100%超出父元素？div宽高100%适配异常求助

嘿，我来帮你搞定这个子元素宽高100%却超出父元素的问题！这种情况在CSS里太常见了，大概率是这几个原因导致的，咱们一个个排查：

• 盒模型计算方式冲突：默认情况下，CSS的box-sizing属性值是content-box，这意味着元素的width和height只计算内容区域的大小，padding和border会额外增加元素的总尺寸。如果你的#myDiv本身带有padding或border，而#inner设置了width:100%; height:100%;再加上自己的padding/border，自然就会超出父元素的范围。
  解决办法：给#myDiv和#inner都设置box-sizing: border-box;，这样元素的宽高会包含padding和border，彻底避免尺寸溢出。示例代码如下：

  #myDiv, #inner {
    box-sizing: border-box;
  }
  #inner {
    width: 100%;
    height: 100%;
  }
  

• 父元素缺少明确的尺寸约束：如果#myDiv的宽高是由内部其他内容撑开的，或者它本身没有设置固定宽高，也没有被上级容器限制尺寸，那么#inner的100%尺寸可能会参考更高层级的容器（比如body或html），而不是#myDiv。
  解决办法：给#myDiv设置合适的尺寸约束。比如如果它是某个父容器的子元素，可以给它设置width:100%; height:100%;（前提是上级容器有明确的尺寸）；或者用flex布局来强制#myDiv占满可用空间：

  /* 假设#myDiv的直接父容器是.parent */
  .parent {
    display: flex;
    /* 若需要垂直方向布局，添加flex-direction: column; */
  }
  #myDiv {
    flex: 1; /* 让#myDiv占满父容器的可用空间 */
  }
  #inner {
    width: 100%;
    height: 100%;
  }
  

• 子元素的margin导致溢出：如果#inner设置了margin值，哪怕宽高是100%，margin也会让元素整体的占位超出父元素的边界。
  解决办法：要么移除#inner的margin；要么把#myDiv的padding设为对应的值来替代子元素的margin；如果需要子元素居中，可以用margin: auto;；实在不行也可以给#myDiv加overflow: hidden;（但这个会裁剪超出的内容，谨慎使用）。

你可以先从检查盒模型开始，这是最常见的问题根源！

内容的提问来源于stack exchange，提问作者Arad