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;
}

这是一个例子