Два независимых дочерних флексбокса с одинаковой высотой без javascript
В разметке ниже эти левые и правые контейнеры flexbox можно прокручивать, чтобы пользователи могли сравнивать детали.
Мне нужен способ, чтобы дочерние элементы с одним индексом имели одинаковую высоту, даже если их содержимое отличается.
Например, два блока адреса должны иметь одинаковую высоту.
Я могу сделать это с помощью javascript, но возможно ли это с помощью CSS?
* {
box-sizing: border-box;
}
div,
main {
border: 1px solid red;
}
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
main {
height: 100%;
flex: 1 1 0;
display: flex;
}
.row {
display: flex;
flex: 1;
}
.col {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
}
.container {
display: flex;
flex: 1;
}
.container {
display: flex;
}
.container .left,
.container .right {
flex: 1;
height: 100%;
overflow: auto;
}
main .row:first-child {
height: 100%;
}<html>
<body>
<header>Header</header>
<main>
<div class = "row">
<div class = "col container">
<div class = "left">
<div class = "name">
<strong>Name</strong> BoB Smith</div>
<div class = "address">
<strong>Address</strong>
<p>21</p>
<p>Somewhere Street</p>
<p>Somewhere City</p>
<p>That Country</p>
<P>BWERE EREWW</P>
</div>
<div>
<strong>Something else</strong>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</div>
</div>
<div class = "right">
<div class = "name">
<strong>Name</strong> BoB Smith</div>
<div class = "address">
<strong>Address</strong>
<p>21</p>
<p>Somewhere Street</p>
</div>
<div>
<strong>Something else</strong>
<ul>
<li>One</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>они не должны быть одинаковой высоты. Так как адрес на левой панели имеет большую высоту, адрес на правой стороне должен расширяться до той же высоты. В приведенном ниже примере Name имеет огромное количество места для 1 строки текста.
Невозможно, чтобы высота была полностью динамической. Они независимы друг от друга.
@JacobGoh вот что я подумал, я просто надеялся, что это может быть уловка
если они не братья и сестры, в противном случае я почти уверен, что это невозможно
Ответы 2
Решение 1
Возможно, вам потребуется изменить структуру HTML. Вам понадобится таблица: http://jsfiddle.net/GCu2D/3566/
<table class = "table">
<tbody>
<tr>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Address</td>
<td><strong>Address</strong>
<p>21</p>
<p>Somewhere Street</p>
<p>Somewhere City</p>
<p>That Country</p>
<P>BWERE EREWW</P>
</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
</tr>
</tbody>
</table>
Решение 2
С существующим макетом и указанием ширины: https://jsfiddle.net/7z9y7pw2/
Если да, то вы можете просто добавить этот код, например:
.left>div,
.right>div {
height: 30%;
}
Это просто для представления, вы можете изменить правило CSS, значения по вашему выбору.
они не должны быть одинаковой высоты. Так как адрес на левой панели имеет большую высоту, адрес на правой стороне должен расширяться до той же высоты. В приведенном выше примере Name имеет огромное количество места для 1 строки текста.
@ dagda1 вы можете изменить правило CSS, если вам нужна другая высота для имени. Правило CSS в ответе предназначено только для представления, что вы можете использовать аналогичный подход и для имени.
Я вообще не хочу указывать высоту. Но это, наверное, невозможно без javascript. Проценты могут работать.
@ dagda1 Проверить обновленное решение
Вот мое решение:
Основная идея - установить родительский элемент двух div (у которого есть класс адреса) для отображения flex.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
div,
main {
border: 1px solid red;
}
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
main {
height: 100%;
flex: 1 1 0;
display: flex;
}
.row {
display: flex;
flex: 1;
}
.address {
flex-grow: 1;
}
.first {
display:flex;
}
.second {
display:flex;
}
main .row:first-child {
height: 100%;
}
</style>
</head>
<body>
<header>Header</header>
<main>
<div class = "row">
<div class = "col container">
<div class = "first">
<div class = "address">
<div class = "name">
<strong>Name</strong> BoB Smith</div>
<strong>Address</strong>
<p>21</p>
<p>Somewhere Street</p>
<p>Somewhere City</p>
<p>That Country</p>
<P>BWERE EREWW</P>
</div>
<div class = "address">
<div class = "name">
<strong>Name</strong> BoB Smith</div>
<strong>Address</strong>
<p>21</p>
<p>Somewhere Street</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Вы имеете в виду, что
something else2 будет в какой-то строке из 1?]