I corrected that one:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
}
.left {
height: auto;
overflow-x: hidden;
}
.right {
right: 0;
background-color: #ddd;
}
.top-right {
height: 475px;
overflow-x: hidden;
}
.bottom-right {
height: calc(100% - 475px);
overflow-y: auto;
}
</style>
</head>
<body>
<div class="split left">
<h2>Left Section</h2>
<p>This is the left half of the page. - auto (scroll if much content)</p>
</div>
<div class="split right">
<div class="top-right">
<h2>Right Section</h2>
<p>This is the right half of the page - top (fixed)</p>
</div>
<div class="bottom-right">
<p>This is the right half of the page - bottom, auto (scroll if much content)</p>
</div>
</div>
</body>
</html>