使导航栏占用css中的整个页面高度

Question

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

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

但是，我想使导航栏的高度为文档的高度。 我觉得我可能需要java脚本，但是我不熟悉java脚本，所以我不知道如何实现这一目标。 我认为高度100％将占据整个页面，无论它只占用页面的可见部分。

如果您想查看页面的其余部分，请点击此处http://jsfiddle.net/HRpXV/3/embedded/result/

Answer 1

100%不适用，因为它是浮动的。 将父容器更改为position: relative ，将navbar更改为position: absolute将解决问题。

#container{
    position: relative;
}

#navbar {
    background: #a8a599;
    /*float: left; Instead of float, use absolute position*/
    position: absolute;
    width: 20%;
    height: 100%;
}

演示

Answer 2

仅使用HTML和CSS，您通常可以使用以下方法修复此100％高度问题：

body,html{
   height:100%;
}

如果你想使用JavaScript方法，那么这应该工作

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

这会将navBar元素的高度设置为浏览器窗口的高度

Answer 3

花了我2个小时，但我终于找到了解决方案！ Derek接受的答案几乎可以正常工作，但正如我的评论所暗示的那样，并非完全如此。 当您的左栏有更多内容然后是主栏，左侧菜单不会伸展到其内容的高度。 您可能永远不会在该菜单中获得如此多的选项，但我正在建立新的管理，将来会有许多模块，您永远不知道它是否会发生。

解决方案是旧的好桌子！ 别担心，不完全。 只有css显示属性，其值为table，table-row和table-column：

基本理念：

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

1. 这两节中的内容很少http://jsfiddle.net/85w56gkx/1/

2. 左侧菜单部分http://jsfiddle.net/1o92r7ao/中的更多内容

3. 主要内容部分中的更多内容http://jsfiddle.net/Ldav83vn/

Answer 4

如果您计划修复navBar，您可以按照Fiddle的方式做一些事情

*{
    margin:0;padding:0;
}
#navBar {
    background: red;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
}
#content {
    background: yellow;
    min-height:1000px;
    display: block;
    margin-left: 100px; /*width of nav bar*/
}

Answer 5

您可以修改#navbar css并将位置设置为fixed

#navbar {
  background: #a8a599;

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

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

  width: 20%;
  height: 100%;
}

float: left; 相对于文档定位。

移除浮动并添加position: fixed; 将元素相对于窗口定位。

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

我把你的小提琴作为一个例子在这里

有关float W3 CSS Float的更多信息

关于position W3 CSS位置的更多信息