使用 CSS 自动将 <aside> 的块高度调整为与 <main> 相同答案

【问题标题】：Automatically adjust block height of <aside> to same as <main>using CSS使用 CSS 自动将 <aside> 的块高度调整为与 <main> 相同
【发布时间】：2022-01-15 01:49:20
【问题描述】：

body {padding: 0;margin: 0;border: 0; padding-top:48px;}
.header {height:48px; width:100%; background-color:blue; position:fixed; left:0; right:0;top:0; z-index:100;}
.container {
    display: grid;
    grid-template-columns: 660px 1fr;
    grid-column-gap:10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1326px;
    margin-top:10px;
    margin-bottom:200px;
}
main {background-color:purple; height:600px; display:flex;justify-content:center; align-items:center; color:#FFF; font-size:30px;}
aside {height: calc(100vh - 48px); position: sticky; top: calc(48px + 15px);display: flex;flex-flow: column;}
aside .side-gallery {display: grid;grid-column-gap: 15px;grid-row-gap: 15px;grid-template-columns:1fr 1fr 1fr; align-items: flex-start; scrollbar-width: none; -ms-overflow-style: none;overflow-y: scroll; position: relative;max-height: 100%;padding: 0px 10px 10px;}
aside .side-gallery .item {background-color:green; width:100%; height:120px;}

<body>
    <div class="header"></div>
    <div class="container">
        <main>Need "side-gallery" (green grid) to take same height as "main content side" (purple color).</main>
        <aside>
            <div class="side-gallery">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </aside>
    </div>


</body>

请点击查看“整页”查看代码结果。

我的网站上基本上有 3 个主要元素。一个“固定标题”（蓝色）、“主要内容侧”，高度大小始终不同（紫色）和“具有不同文章的侧画廊”（绿色），最大高度为 100vh。

我需要什么：我需要使我的粘性侧边画廊（绿色）与“主要内容面”（紫色）的高度相同。显然我可以简单地设置它的“高度”，但由于我的“主要内容侧”（紫色）总是在变化，我需要侧画廊（绿色）自动采用相同的高度。不知道如何实现。请只使用 CSS 解决方案。

【问题讨论】：

标签： html css flexbox overflow css-grid

【解决方案1】：

我认为我最终能够解决问题：

您应该从 side 元素中删除 height 属性，并将 flex-grow : 1 和 flex-basis: 0px 添加到 side-gallery 中。

这里是实现：

body {padding: 0;margin: 0;border: 0; padding-top:48px;}
.header {height:48px; width:100%; background-color:blue; position:fixed; left:0; right:0;top:0; z-index:100;}
.container {
    display: grid;
    grid-template-columns: 660px 1fr;
    grid-column-gap:10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1326px;
    margin-top:10px;
    margin-bottom:200px;
}
main {background-color:purple; height:400px; display:flex;justify-content:center; align-items:center; color:#FFF; font-size:30px;}
aside {position: sticky; top: calc(48px + 15px);display: flex;flex-flow: column;}
aside .side-gallery {display: grid;grid-column-gap: 15px;grid-row-gap: 15px;grid-template-columns:1fr 1fr 1fr; align-items: flex-start; scrollbar-width: none; -ms-overflow-style: none;overflow-y: scroll; position: relative;max-height: 100%;padding: 0px 10px 10px;flex-grow : 1 ;flex-basis: 0px;}
aside .side-gallery .item {background-color:green; width:100%; height:120px;}

<body>
    <div class="header"></div>
    <div class="container">
        <main>Need "side-gallery" (green grid) to take same height as "main content side" (purple color).</main>
        <aside>
            <div class="side-gallery">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </aside>
    </div>


</body>

现在侧边元素会根据主元素动态变化。

【讨论】：

非常感谢！这正是我所需要的。我在考虑flex-basis，但不知道该放在哪里。这非常有效！