Html 100%高度取决于兄弟元素的高度

我需要元素cnt的正确高度为其同胞的100%

它没有父元素，只有兄弟元素

有没有可能用CSS实现这一点？还是我必须使用javascript

我有这样的结构：

.栏目{ 显示：块； 最小高度：50px； 背景色：ccc； 文本对齐：居中； 浮动：左； } .decktop-12{ 宽度：100%； } .decktop-8{ 宽度：66%； } .decktop-4{ 宽度：33%； } .cnt{ 背景色：995595； } .对{ 背景色：559959； } 内容顶端 内容-主要 内容-主要 内容-主要 内容-主要 内容-主要 内容-权利 内容底部

---

您只能使用CSS创建网格布局，不需要javascript：

这是您可以做的一个示例：

.电网{ 显示：网格； 网格模板列：2fr 1fr； 网格模板区域： 收割台 内容权 页脚 } .标题{ 网格区域：标题； } .内容{ 网格区域：内容； 背景色：995595； } .对{ 网格区域：右； 背景色：559959； } .页脚{ 网格区域：页脚； } .页眉，.页脚{ 最小高度：50px； 背景色：ccc； } .grid>*{ 文本对齐：居中； } 内容顶端 内容-主要 内容-主要 内容-主要 内容-主要 内容-主要 内容-权利 内容底部

---

您只能使用CSS创建网格布局，不需要javascript：

这是您可以做的一个示例：

.电网{ 显示：网格； 网格模板列：2fr 1fr； 网格模板区域： 收割台 内容权 页脚 } .标题{ 网格区域：标题； } .内容{ 网格区域：内容； 背景色：995595； } .对{ 网格区域：右； 背景色：559959； } .页脚{ 网格区域：页脚； } .页眉，.页脚{ 最小高度：50px； 背景色：ccc； } .grid>*{ 文本对齐：居中； } 内容顶端 内容-主要 内容-主要 内容-主要 内容-主要 内容-主要 内容-权利 内容底部

---

您可以使用css网格或flex显示

我建议你看看：

以及Bootstrap 4如何使用flex实现网格：

与float相比，您可以更好地控制网格的行为和可能性

我给你举了一个使用flex的例子。在本例中，默认情况下flex使列的高度均匀，看起来类似于使用float编写的代码：

<div class="row">
    <div class="mobile-12 desktop-12 column c1">
        Content top
    </div>
    <div class="mobile-12 desktop-8 column c2">
        Content - main
        <br><br><br>
    </div>
    <div class="mobile-12 desktop-4 column c3">
        Content - right
    </div>
    <div class="mobile-12 desktop-12 column c1">
        Content bottom
    </div>
</div>

<style>
    .row {
        display: flex;
        flex-wrap: wrap; /* Allow multi-line */
    }
    .column {
        flex-grow: 0; /* Prevents column from auto growing */
        flex-shrink: 0; /* Prevents column from auto shrinking */
    }
    .mobile-12 {
        flex-basis: 100%;
    }
    .desktop-8 {
        flex-basis: 66.66666%;
    }
    .desktop-4 {
        flex-basis: 33.33333%;
    }
    .c1 { background-color: grey; }
    .c2 { background-color: purple; }
    .c3 { background-color: green; }
</style>

---

您可以使用css网格或flex显示

我建议你看看：

以及Bootstrap 4如何使用flex实现网格：

与float相比，您可以更好地控制网格的行为和可能性

我给你举了一个使用flex的例子。在本例中，默认情况下flex使列的高度均匀，看起来类似于使用float编写的代码：

<div class="row">
    <div class="mobile-12 desktop-12 column c1">
        Content top
    </div>
    <div class="mobile-12 desktop-8 column c2">
        Content - main
        <br><br><br>
    </div>
    <div class="mobile-12 desktop-4 column c3">
        Content - right
    </div>
    <div class="mobile-12 desktop-12 column c1">
        Content bottom
    </div>
</div>

<style>
    .row {
        display: flex;
        flex-wrap: wrap; /* Allow multi-line */
    }
    .column {
        flex-grow: 0; /* Prevents column from auto growing */
        flex-shrink: 0; /* Prevents column from auto shrinking */
    }
    .mobile-12 {
        flex-basis: 100%;
    }
    .desktop-8 {
        flex-basis: 66.66666%;
    }
    .desktop-4 {
        flex-basis: 33.33333%;
    }
    .c1 { background-color: grey; }
    .c2 { background-color: purple; }
    .c3 { background-color: green; }
</style>

---

您可以为此使用display:flex；示例：感谢您的评论，但元素是兄弟元素。它没有元素父元素。您可以为此使用display:flex；示例：感谢您的评论，但元素是兄弟元素。它没有元素父元素。对于那些关心css工作交叉浏览器的人来说，它不是最安全的选择，因为它不会在浏览器中工作IE@LuuHoangBac这个链接说IE也支持使用-ms-来帮助那些关心css工作的人，这不是最安全的选择，因为它在环境中不起作用IE@LuuHoangBac此链接表示IE还支持使用-ms-