如何保持父 div 的纵横比但允许子元素填充所有垂直空间？答案

【问题标题】：How to maintain aspect ratio of parent div but allow children to fill all vertical space?如何保持父 div 的纵横比但允许子元素填充所有垂直空间？
【发布时间】：2021-05-11 01:36:06
【问题描述】：

我正在尝试构建一个响应式盒子，其中盒子的纵横比保持不变，儿童填充所有垂直空间。

到目前为止，如果我给孩子一个固定的高度，父母不再保持它的纵横比，但我根本不能给孩子任何高度。堆栈溢出似乎有一些答案，但在我的情况下无法让它们完全工作。这是我在 React 中的代码：

ReactDOM.render(
    <div
        style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        }}
    >
        <div
            style={{
                width: 350,
                height: 250,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: 'white',
            }}
        >
            <Diagram />
        </div >
    </div>,
    document.getElementById('root'),

组件：

export default function Diagram(): ReactElement {
    return (
        <div className="h__diagramContainer">
            <div className="h__columnContainer">
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
            </div>
        </div>
    );
}

scss:


.h__diagramContainer {
    border: 1px solid green;
    width: 100%;
}

.h__diagramContainer:after {
    padding-top: 70%;
    display: block;
    content: '';
}

.h__columnContainer {
    display: flex;
}

.h__diagramColumn {
    width: calc(100% / 3);
}

.h__node {
    width: 20px;
    height: 20px;
}

如何让子 div 占据所有可用的垂直空间，以便它们可以用作弹性容器？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

尝试设置父容器的高度。

来自MDN docs on CSS height

百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 auto。

所以现在你的父容器的高度是 250 像素，但它的直接子容器 .h__diagramContainer 的高度是自动的。因此，当.h__diagramColumn 将高度设置为 100% 时，它基本上是其中已有内容的 100%。

相反，如果您只是为 .h__diagramContainer 和 .h__columnContainer 设置了 100% 的高度，那么您的 .h__diagramColumn 子级将是顶级父级的 250 像素全高的 100%。

【讨论】：