子Div底部超出父Div排查：#ContenedorTipoInversionDiv超出#SectionInvest

嘿，我帮你找到了问题的根源！你的#ContenedorTipoInversion之所以会超出父元素#SectionInvest的底部，核心原因是CSS盒模型的默认行为加上你设置的height:100%和padding叠加导致的。

问题分析 #

CSS默认的盒模型是content-box，这意味着你设置的height:100%只计算元素的内容区域高度，而上下各15%的padding会额外加到内容高度的外面。这样一来，#ContenedorTipoInversion的总高度就变成了100% + 15% + 15% = 130%，直接超过了父元素#SectionInvest的100vh高度，自然就从底部溢出了。

另外，你给#ContenedorTipoInversion设置了display:inline-block，虽然这不是主要问题，但inline-block元素可能会带来一些垂直对齐的小问题，换成display:block会更稳妥。

解决方案 #

有两种简单的修复方式，选一种适合你的就行：

方案1：使用border-box盒模型

给#ContenedorTipoInversion添加box-sizing: border-box;，这样设置的height:100%会包含padding和border的高度，总高度不会超出父元素：

#ContenedorTipoInversion {
  padding:15% 0% 15% 0%;
  height:100%;
  margin:0;
  width:100%;
  display:block; /* 换成block更合适 */
  box-sizing: border-box; /* 关键修复 */
}

方案2：移除height:100%

如果你不需要强制让#ContenedorTipoInversion占满父元素高度，直接去掉height:100%，让padding和内部内容自然撑起高度，这样也不会溢出：

#ContenedorTipoInversion {
  padding:15% 0% 15% 0%;
  /* 移除height:100%; */
  margin:0;
  width:100%;
  display:block;
}

额外提示 #

你可以检查一下.TipoInversion的display:inline-block，如果这三个子元素是要横向排列，这个设置没问题，但记得可能需要处理inline-block元素之间的默认空白（可以通过父元素设置font-size:0或者子元素设置margin-right:-4px解决）。

内容的提问来源于stack exchange，提问作者Oliver Mohr Bonometti