CSS боковая панель всегда полная высота

Question

Я занят на этой странице (http://s.nogax.ga/editor-css.html), и я пытаюсь создать боковую панель высотой всего. В принципе, боковая панель Div всегда должна выходить в нижнюю часть экрана. (а вместе с ним черная линия справа от него)

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

Вы можете просто сделать врезку position:fixed, если вы хотите всегда отображаться сбоку:

.sidebar { 
    height: 100%; 
    position: fixed; 
} 

Вот example

Answer 2

Применить следующий CSS сделает вывод, как вы ожидали:

.sidebar { 
    width: 15%; 
    position: fixed; 
    background-color: grey; 
    border-right: 2px solid; 
    bottom:0; 
} 

Проверить https://jsfiddle.net/r8u7pkd6/2/.

Answer 3

Для информации и в современных браузерах вы также можете использовать display:flex;.

BTW: Вы misstyped heig ХТ = heig й

@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>