How to stretch div from top to the bottom of the page?

Look, I know that there are many threads with many solutions, but none of them have worked for me. I'm a begginer and I'm just starting making websites in HTML. I've tried to make a website before, but I've had the same problem. I've deleted the previous one and made a new one and I still can't solve this.

What I've tried and doesn't really work:

setting height to 100% / 100vh (method one)
setting div min-height to 100%, giving it position absolute and doing this:
```
top: 0px

bottom: 0px
```

(method two)

When I do the method 1 my div isn't stretched to the bottom of the page when you can scroll the page, it is stretched to the 100% height of the browser window instead.

And when I do the method 2 the divs just disappear. I didn't forced the border to stretch so you can still see it but if I would do this it'd disappear.

And by the way, I'm just a begginer and I still don't even know basics of JavaScript, jQuery etc. so I'd like to just use pure HTML and CSS and not JavaScript and other stuff until I learn them.

EDIT: The DIVs need to stretch when the text is added too, actually that's one of my main problems.

Solution

Try this… You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%

Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.

html, body {
    height: 100%;
}

.page {
    background: linear-gradient(#2d5aa4, #03637c);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.NavigationBar {
    background: linear-gradient(to right, #636363, #4e4e4e);
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 220px;
    min-height: 100%;
    z-index: 2;
    font-family: BloggerSans;
    font-size: 1.5em;
}
.NavigationBarBorder {
    background: linear-gradient(to right, #292929, #171617);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    min-height: 100%;
    z-index: 3;
}

.MainParent {
    position: relative;
    min-height: 100%;
}

.NavigationTop {
    background: linear-gradient(#636363, #4e4e4e);
    position: absolute;
    left: 220px;
    width: calc(100vw - 220px);
    height: 75px;
    z-index: 1;
    font-family: Jaapokki;
    font-size: 2em;
}

.Main {
    background: linear-gradient(#ffffff, #e8e8e8);
    position: absolute;
    top: 20vh;
    bottom: 0px;
    width: calc(100vw - 440px); /* set your width */
    left: 220px;
    margin-left: 90px; /*set your margin here */
    min-height: 100%;
    z-index: 4;
    padding-left: 40px;
}

.MainBorder {
    background: linear-gradient(#f79104, #e9720d);
    position: absolute;
    top: -10px; 
    left: 0;
    width: 40px;
    min-height: 100%;
}

h1 {
    font-family: 'Jaapokki';
    text-align: center;
    font-size: 3em;
}

.Text {
    font-family: 'BloggerSans';
    font-size: 2em;
}

<body class="page">
    <div class="MainParent">
        <nav class="NavigationBar">
            <div class="NavigationBarBorder"></div>
            Table of content
        </nav>
        <header class="NavigationTop">
            Navigation
        </header>
        <div class="Main">
            <h1>Title</h1>
            <div class="Text">
                Text </br>
            </div>
            <div class="MainBorder"></div>
        </div>
    </div>
</body>