需要具有不同宽度的响应式等高 div 标签答案

【问题标题】：Need responsive equal height div tags with different width需要具有不同宽度的响应式等高 div 标签
【发布时间】：2018-11-21 08:40:26
【问题描述】：

我们如何获得不同宽度的响应式等高 div 标签？例如，如果屏幕为 100%，我需要 80% 为一个 div，其余为其他 div，但它们的高度应该相同。我尝试了很多插件，但没有用。我现在正在使用 bootstrap4。？

请找到我正在使用的示例 html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>equal height</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen">
                <h2>equal height</h2>
                <h2>equal height</h2>
                <h2>equal height</h2>

            </div>
            <div class="col-md-3 col-sm-12 col-lg-3 col-xs-12" style="background-color:lightyellow">

                <h2>equal height</h2>

            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

分享你的html
你能发布你的 HTML 和 CSS 吗？
感谢您的回复，请查找附件中的sn-p，其实我是新手。但是对学习的东西很感兴趣。请指导我。

标签： javascript html twitter-bootstrap css

【解决方案1】：

在父元素上添加display: flex和align-items: stretch。

(...)
    <div class="row">
            <div class="col-md-12" style="display: flex; align-items: stretch;">
                <div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen">
                    <h2>equal height</h2>
(...)

这种方法的缺点是您需要使用媒体查询在较小的屏幕上将一个子级放在另一个子级下方（display: flex 他们总是一个在另一个旁边）

【讨论】：

感谢您的回答，它工作得很好。能否请您指导我如何编写媒体查询。实际上我是新手。
开始的好地方是：w3schools.com/css/css_rwd_mediaqueries.asp 对于这种特定情况，您需要添加 css @media only screen and (max-width: 768px) { /* For mobile phones: */ #id-of-parent { flex-direction: column; } }