Position absolute, make right column height same as left column - html

Question

I struggle with following problem: we have absolutely positioned two divisions, one is for content, one for navbar. Left one contains huge amount of text, so it's usually stretched far over page height. I want the right one (navbar) to stretch as well. Sadly, I can't obtain it with known methods.
.left, .right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background: red;
}
.right {
right: 0;
width: 30%;
background: green;
}
<div class="left">
<div class="leftc">
ABC <!-- large amount of text -->
</div>
</div>
<div class="right">
</div>
Fiddle
Note: I know how to make right bar with fixed position but I want navbar to be scrolled with whole page as well as rest of content. No fixed positions please.

Answer 1

You can achieve that using display: flex on the body. (I erased all the position settings)
for (i = 0; i < 100; i++)
$(".leftc").append("<p>xxx</p>");
body {
display: flex;
margin: 0;
}
.left {
width: 70%;
}
.leftc {
height: 100%;
background-color: red;
}
.right {
width: 30%;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<div class="leftc">
ABC
</div>
</div>
<div class="right">
</div>
https://jsfiddle.net/tknna6ww/1/

Answer 2

The left div is stretched by its content, not by a defined height. You can set the height of the right div to the same height of the left one using JavaScript:
$(".right").css("height", $(".leftc").css("height"));
Note that you have to put this line after the page is rendered to make sure that the browser has already calculated the correct height. Here is a demo:
for (i = 0; i < 100; i++)
$(".leftc").append("<p>xxx</p>");
$(".right").css("height", $(".leftc").css("height"));
.left,
.right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background-color: red;
}
.right {
right: 0;
width: 30%;
background-color: green;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<div class="leftc">
ABC
</div>
</div>
<div class="right">
</div>

Answer 3

This is a rather simple if you can put them in the same container.
That container then only needs to have display: flex; (and flex-direction: row; since you want it horizontally)
.wrapper {
display: flex;
flex-direction: row;
}
.left {
background-color: blue;
}
.right {
width: 50px;
background-color: red;
}
<div class="wrapper">
<div class="left">
<textarea></textarea>
</div>
<div class="right"></div>
</div>
The newer way to do this, that is widely but not fully supported is grid:
.wrapper-of-your-whole-site-potentially {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: auto;
grid-template-areas: "left right";
}
.left {
grid-area: left;
height: 500px;
background-color: blue;
}
.right {
grid-area: right;
background-color: red;
}
<div class="wrapper-of-your-whole-site-potentially">
<div class="left">
</div>
<div class="right"></div>
</div>

Answer 4

make red side height: 100%;
.left, .right {
position: absolute;
top: 0;
bottom: 0;
}
.left {
left: 0;
width: 70%;
}
.left .leftc {
background: red;
height: 100%;
}
.right {
right: 0;
width: 30%;
background: green;
}
<div class="left">
<div class="leftc">
ABC <!-- large amount of text -->
</div>
</div>
<div class="right">
</div>