使用百分比填充技巧来保持纵横比会导致CSS网格溢出

我正在使用

padding top

强制将div的纵横比设置为16:9。div的内容绝对定位并展开以填充div

HTML:

它可以很好地实现纵横比，但是由于某种原因，div溢出了我的CSS网格容器

下面是一个问题的工作示例：

*{
框大小：边框框；
保证金：0；
填充：0；
}
html{
身高：100%；
宽度：100%；
}
身体{
背景色：#404040；
最小高度：100%；
宽度：100%；
}
p{
颜色：#f0；
文本对齐：居中；
}
#内容{
显示：网格；
网格模板列：自动；
网格模板行：自动；
}
.主题{
背景色：#808080；
最小高度：100px；
利润率：8px；
填充：8px；
}
.比率-16-9{
背景色：#0080f0；
垫面：56.25%；
/*如果您注释掉上面的行并取消注释下面的行，事情会正常进行，但纵横比不会保持不变*/
/*高度：300px*/
位置：相对位置；
}
.比率-16-9>p{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}

该p元素位于长宽比为16:9的div中

问题似乎是使用

auto

调整网格列的大小：

#content {
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

填充百分比是根据包含块（）的宽度计算的

出于任何原因，

auto

值为此被浏览器忽略

如果从

auto

切换到

fr

单元，布局将按预期工作

#content {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}

*{
框大小：边框框；
保证金：0；
填充：0；
}
html{
身高：100%；
宽度：100%；
}
身体{
背景色：#404040；
最小高度：100%；
宽度：100%；
}
p{
颜色：#f0；
文本对齐：居中；
}
#内容{
显示：网格；
/*网格模板列：自动*/
网格模板列：1fr；
网格模板行：自动；
}
.主题{
背景色：#808080；
最小高度：100px；
利润率：8px；
填充：8px；
}
.比率-16-9{
背景色：#0080f0；
垫面：56.25%；
/*如果您注释掉上面的行并取消注释下面的行，事情会正常进行，但纵横比不会保持不变*/
/*高度：300px*/
位置：相对位置；
}
.比率-16-9>p{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}

该p元素位于长宽比为16:9的div中

我从未想过要查看列大小，因为它似乎是一个高度问题！非常感谢。既然%填充可能会有问题，那么有没有更好的方法来获得CSS基恒定的纵横比呢？嗯，网格项上的百分比填充可能会有问题。但是您的

.ration-16-9

元素不是网格项。它是网格项的子项，因此超出了网格布局的范围。啊，感谢您对我的问题的澄清和新见解。但是，我在最后发布了警告，因为我不确定浏览器在计算子代的填充百分比时如何计算网格项的宽度。网格项和flex项在填充百分比方面都有相同的问题。这篇弹性文章有一些变通建议。

#content {
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

#content {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}