CSS：使用圆角时嵌套 DIV 不填充父级

Question

我有两个 div，父级具有圆角、溢出：隐藏和内联背景图像，子级 div 是 position:absolute，具有背景颜色和不透明度。

在我的正常屏幕尺寸下，子 DIV 几乎填满了父 DIV，但我只能在拐角处辨认出父 DIV 的一条细线。

更大的问题是，当我放大页面时，在某些屏幕尺寸下，子 DIV 比父 DIV 小得多，这显然看起来很糟糕。

这是我的代码：

.parent-div {
    height:350px;
    border-radius:4px;
    overflow:hidden;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
}
.child-div {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    text-align:left;
    background-color:rgba(255,255,255,0.9);
}

我用谷歌搜索了这个，但找不到有效的解决方案。我已经尝试在子 DIV 上添加边框半径，但这不起作用。

仅供参考 - 当不使用边界半径时，一切似乎都很好。

编辑：我想我已经找到了问题所在。我在所有这些周围都有另一个带有填充的 div。当我摆脱它时，它就起作用了。当我更改填充大小时，我可以看到这会导致上图中的各种填充大小出现问题。

EDIT2：实际上，我发现导致问题的原因是溢出：隐藏在父 div 上。当删除它并确保我在子 div 上有边框半径时，一切都按预期工作。

Answer 1

如果你提供一个工作小提琴会更好，但我认为你的问题是.child-div 的度量。试试这个：

.child-div {
    box-sizing: border-box; /* here */
    border-radius: 4px; /* to apply the same that the parent */
    height: 100%; /* to make all height */
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    text-align:left;
    background-color:rgba(255,255,255,0.9);
}