响应式等高 div 不指定高度答案

【问题标题】：Responsive Equal height div without specifying the height响应式等高 div 不指定高度
【发布时间】：2023-03-13 01:53:02
【问题描述】：

我正在寻找一些响应式等高 div 仅使用 CSS。我不想指定高度。看起来有点类似于下图，但两个 div 都应该根据另一个 div 的高度进行调整。

如果左侧div很长，则右侧div应调整到左侧div，反之亦然。

右侧的 div 也有 2 个小 div，它们的高度也应该相同。

这可以仅使用 CSS 来实现吗？还是我应该使用 JS/jQuery？

Example here on the jsFiddle

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

.row {
	display: table;
}

.column {
	display: table-cell;
	vertical-align: top;
}

.w100 {
	width: 100%;
}

.w75 {
	width: 75%;
}

.w50 {
	width: 50%;
}

.w25 {
	width: 25%;
}

<body>
	<div class="row w100">
		<div class="column w75">
			<img src="http://placehold.it/500x500" alt="">
		</div>
		<div class="column w25">
			<div class="col-row">
				<img src="http://placehold.it/250x250" alt="">
			</div>
			<div class="col-row">
				<img src="http://placehold.it/250x250" alt="">
			</div>
		</div>
	</div>

【问题讨论】：

您的链接无效。请修复它。
很抱歉。我现在已经放了一个工作链接。
您不必自己创建 HTML body 元素。输出窗口将您的 HTML 代码放在 body 元素中（除了您没有关闭标签的事实）

标签： javascript jquery html css

【解决方案1】：

您可以使用flex-box，例如：

.row {
    display: flex;
    flex-direction:row;
}

.column {
    display: flex;
    flex-direction:column;
}

摆脱宽度后，浏览器可以很好地对齐项目：
http://jsfiddle.net/2vLpx9k3/3/

您可能需要一些前缀来支持跨浏览器。

【讨论】：

是否可以只使用css2？因为 flex 只适用于现代浏览器。它也不支持ie9。
@SpiritOfDragon，IE9 不是现代的 ;)
请注意，使用 flexbox 会导致父容器在浮动子元素时折叠，并且 clearfix 不起作用。

【解决方案2】：

我做了一些你可能正在寻找的东西。

http://jsfiddle.net/2vLpx9k3/4/

它根据外部元素调整内部元素的宽度和高度。

HTML：

<div class="outer">
    <div class="left">
        <div class="right"></div>
        <div class="right bottom"></div>
    </div>
</div>

CSS：

.outer {
    height: 100vh;
}

.left {
    background-color: red;
    width: 100%;
    height: 100%;
    margin-right: 50%;
}

.right {
    background-color: green;
    height: 50%;
    margin-left: 50%;
}

.right.bottom {
    background-color: black;
}

【讨论】：

为什么不呢？我只是想知道..因为除了 operna mini 之外的所有浏览器都支持它。 caniuse.com/#feat=viewport-units
因为 IE 支持是“部分”的。但是，这取决于 OP 项目的要求。
注意“所有其他部分支持是指不支持“vmax”单位。”
但是如何在这 2 个 div 中放置 3 个图像？