JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin: 0; padding: 0">
    <div style="background-color: red">asbd
        <br>test 1 2</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo
        <br>very
        <br>long
        <br>paragraph
        <br>!</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
    <div style="background-color: red">asbd
        <br>test 1 2</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo
        <br>very
        <br>long
        <br>paragraph
        <br>!</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
    <div style="background-color: red">asbd</div>
    <div>asbd</div>
    <div style="background-color: blue">aoio ioeoifo</div>
    <div>aoio ioeoifo</div>
</body>

JavaScript

$(document).ready(function () {

    // when including images in your side you should use $(window).load(function() {[...]} to make sure they are completely loaded before the script calculates the heights

    var pageHeight = $(window).height(); // JS-only and IE-compatible solution see my answer
    var sumElementHeights = 0;
    var count = -3; // ensures that the black border is inside the viewport

    for (var i = 0; i < $('div').length && sumElementHeights < pageHeight; i++, count++) {
        sumElementHeights += $('div').eq(count).height(); // sums up the paragraph heights
    }

    $('div').eq(0).css('border-top', '10px solid black');
    $('div').eq(count).css('border-bottom', '10px solid black');
    // you could add a loop here for each page individually...        
});