У меня есть макет, где верхний заголовок должен иметь 100%, а контент имеет два столбца контента. Левый столбец должен занимать оставшееся вертикальное пространство, а правый столбец будет переполнен, однако высота также должна занимать оставшееся вертикальное пространство (аналогично левому элементу).
html:
<html>
<body>
<div class="wrap">
<div class="header">
header
</div>
<div class="content">
<div class="left">left</div>
<div class="right">
<div>right</div>
-- omitted a lot of repeating rows here which are needed to create overflow
<div>right</div>
<div>right</div>
<div>right</div>
</div>
</div>
</div>
</body>
</html>
css:
html, body {
height: 100%
}
.wrap {
display: flex;
flex-flow: column;
height: 100%;
}
.header {
background-color: blue;
width: 100%;
}
.content {
height: 100%;
display: flex;
justify-content: space-between;
}
.left {
height: 100%;
width: 50%;
background-color: #d5f4e6;
}
.right {
height: 100%;
width: 50%;
background-color: #d504e6;
position: absolute;
left: 50%;
overflow: auto;
}
У меня это в основном работает, но высота правого столбца немного выше, чем левого элемента (по какой-то причине на высоте заголовка). Откройте ссылку на мой кодовый указатель https://codepen.io/ilikepure/pen/MWajBYY и прокрутите нижний правый i-frame до упора, чтобы увидеть странный эффект.
Как я могу это исправить? Спасибо!