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，将导航栏更改为position: absolute即可解决问题。

#container{
    position: relative;
}

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

Demo

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

这两个部分的内容很少 http://jsfiddle.net/85w56gkx/1/
左侧菜单部分的更多内容 http://jsfiddle.net/1o92r7ao/
主要内容部分中的更多内容 http://jsfiddle.net/Ldav83vn/

Answer 4

如果您打算修复导航栏，您可以按照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并将位置设置为固定

#navbar {
  background: #a8a599;

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

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

  width: 20%;
  height: 100%;
}

float: left;与文档相关。

删除float并添加position: fixed;将元素相对于窗口定位。

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

我为你的小提琴做了一个例子Here

有关float W3 CSS Float

的更多信息

有关position W3 CSS Position

的更多信息

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

5 个答案: