javascript - CSS のみで絶対的な上下と固定された側面を持つ境界線を作成するにはどうすればよいですか? 画像が含まれています

Question

ピンクのコンテンツはその後ろになります。これを作成することはできましたが、javascript を介して高さを拡張する必要がありました。ウィンドウのサイズ変更、オンスクロールなどは、側面を完全に下に移動して下部に接続する唯一の方法でした。JSは一切使いたくない。何か案は？

私がこれまでに持っているものを追加しました: jsFiddle

CSS:

body {
    background: #FF3300;
}
.border-top {
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    right:0;
    left:0;
    margin: 20px 20px 0 20px;
    border-top: 5px solid #d3ad42;
    background: none;
    pointer-events: none;
}
.border-right {
    margin: 20px 20px 20px 0;
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    border-right: 5px solid #d3ad42;
    pointer-events: none;
}
.border-bottom {
    display: block;
    z-index: 10;
    position: fixed;
    height: 20px;
    bottom:0;
    right:0;
    left:0;
    margin: 0 20px 0 20px;
    border-top: 5px solid #d3ad42;
    background: inherit;
    pointer-events: none;
}
.border-left {
    margin: 20px 0 20px 20px;
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    border-left: 5px solid #d3ad42;
    pointer-events: none;
}
.content {
    padding: 40px;
    min-height: 1400px;
}

JS:

var WIDTH, HEIGHT, SCROLL;

document.addEventListener("scroll", resize, false);

function resize() {
    HEIGHT = $(window).height();
    WIDTH = $(window).width();
    SCROLL = $(document).scrollTop();

    // BORDER
    $('.border-left').height(HEIGHT + SCROLL - parseInt($('.border-left').css('margin-top'), 10) * 2);
    $('.border-right').height(HEIGHT + SCROLL - parseInt($('.border-right').css('margin-top'), 10) * 2);
}