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

- Rumanoid

---

这里有一些拼写错误。"heigth" 应该改为 "height"。 - Drew Noakes

Answer 1

如果你希望侧边栏始终显示在页面侧边，你可以将其position:fixed。

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

Here is an example

- Antonio Smoljan

---

我也希望它能够延伸到页面底部（如果我的问题不清楚，对不起）。 - Rumanoid

Answer 2

以下CSS样式将使输出与您所期望的相同：

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

请查看https://jsfiddle.net/r8u7pkd6/2/。

- ketan

Answer 3

对于信息和现代浏览器，您也可以使用display:flex;。

顺便说一句：您拼错了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>

- G-Cyrillus