Javascript 使导航栏在css中占据整个页面高度

我正在设计一个使用css和html的网站。我已经使用这个css在页面的左侧获得了一个导航栏，但是当屏幕向下滚动时，导航栏不再继续

#navbar {
  background: #a8a599;
  float: left;
  width: 20%;
  height: 100%;
}

但是，我希望将导航栏的高度设置为文档的高度。我觉得我可能需要java脚本来实现这一点，但是我对java脚本还不熟悉，所以我不确定如何实现这一点。我认为100%的高度会占据整个页面，尽管它只占据页面的可见部分

如果你想看这一页的其余部分，它就在这里

---

如果您计划修复导航栏，您可以按照

---

仅使用HTML和CSS，您通常可以通过以下方式解决此100%高度问题：

body,html{
   height:100%;
}

如果您想使用JavaScript方法，那么这应该是可行的

document.getElementById("navbar").style.height=window.innerHeight;

---

这将把导航栏元素的高度设置为浏览器窗口的任何高度

100%

不适用，因为它是浮动的。将父容器更改为

position:relative

，将导航栏更改为

position:absolute

将解决此问题

#容器{
位置：相对位置；
}
#导航栏{
背景#a8a599；
/*浮动：左侧；使用绝对位置代替浮动*/
位置：绝对位置；
宽度：20%；
身高：100%；
}

---

您只需修改

#navbar

css并将位置设置为“固定”

#navbar {
  background: #a8a599;

  /* removed css */
  /* float: left; */

  /* new css */
  position:fixed;
  top:0;
  left:0;
  /***********/

  width: 20%;
  height: 100%;
}

float：左相对于文档定位

移除浮动并添加
位置：固定将相对于窗口定位元素

然后您可以添加顶部、底部、左侧或右侧以满足您的需要

我用你的小提琴作为例子

有关浮动的更多信息

关于
职位的更多信息
我花了大约2个小时，但我终于找到了解决办法！德里克接受的答案几乎有效，但正如我的评论所示，并非完全有效。当你的左栏比主栏有更多的内容时，左菜单不会延伸到其内容的高度。你可能永远不会在菜单中得到这么多的选项，但我正在建立一个新的管理系统，它将在未来有许多模块，你永远不知道它是否会发生

解决方案是旧的好表格！别担心，不太好。仅css显示值为表、表行和表列的属性：

基本思想：

#page {
    display: table;
    min-height: 100%;
    width: 100%;
}
#pageRow {
    display: table-row;
}
#leftMenu {
    display: table-cell;
    width: 300px;
    background-color: red;
}
#content {
    display: table-cell;
    background-color: blue;
}

两部分内容都很少

更多内容请参见左侧菜单部分

更多内容请参见主内容部分

最好的方法取决于最高级别的家长的css。需要更多的结构显示在一个元素中…在jsfiddle.netIt中创建一个实时演示很好而且几乎可以工作。但Popgalop肯定也想要我想要的东西。这个解决方案并不能100%解决问题。当左菜单中的内容比右菜单中的内容（主要内容）多时，左菜单不会向上延伸以适应其元素的高度。这么简单的任务（比如android用户界面），我仍然找不到合适的解决方案：（哦，你们会爱我的——检查我的答案。因为我刚刚找到了解决方案。
#page {
    display: table;
    min-height: 100%;
    width: 100%;
}
#pageRow {
    display: table-row;
}
#leftMenu {
    display: table-cell;
    width: 300px;
    background-color: red;
}
#content {
    display: table-cell;
    background-color: blue;
}