CSS Sidebar always full height - html

Question

I am busy on this page (http://s.nogax.ga/editor-css.html) and I am trying to make a full height sidebar.
Basically, the div sidebar should always extend to the bottom of your screen.
(and with it the black line on the right of it)
JSFiddle
html
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
css
html, body {
background-color: grey;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
heigth: 100%;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
heigth: 20px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
.content {
position: absolute;
width: 100%;
heigth: 100%;
}
.sidebar {
width: 15%;
position: absolute;
background-color: grey;
border-right: 2px solid;
}
.editor {
position: absolute;
width: 84.5%;
right: 0;
background-color: grey;
}

Answer 1

You can just make the sidebar position:fixed if you want it to always be displayed on the side:
.sidebar {
height: 100%;
position: fixed;
}
Here is an example

Answer 2

Apply following css will make output as you expected:
.sidebar {
width: 15%;
position: fixed;
background-color: grey;
border-right: 2px solid;
bottom:0;
}
Check https://jsfiddle.net/r8u7pkd6/2/.

Answer 3

For infos and nowdays browsers, you could use display:flex; too.
BTW: You misstyped height != heigth
#font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
html, body {
background-color: grey;
margin: 0;
width :100%;
height:100%;
flex-direction:column
}
body,.content {
display:flex;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
margin: 0;
}
.content {
flex:1;
}
.sidebar {
width: 15%;
background-color: grey;
border-right: 2px solid;
}
.editor {
flex:1; /* will use remaining space*/
/*width: 84.5%;
right: 0; useless here*/
background-color: lightgrey;
}
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>