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

Posted 2023-04-13

【中文标题】使导航栏在css中占据整个页面高度

【英文标题】：Make navigation bar take up entire page height in css

【发布时间】：2013-11-29 21:19:52

【问题描述】：

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

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

但是我想让导航栏的高度成为文档的高度。我觉得我可能需要 java 脚本，但是我是 java 脚本的新手，所以我不确定我将如何完成这个。我认为将高度设置为 100% 会使其占据整个页面，因为它只占据页面的可见部分。

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

【问题讨论】：

最佳方法取决于父母的 css ***别。需要更多的结构来显示一个元素...在 jsfifddle.net 中创建一个现场演示

【参考方案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

【讨论】：

它很好，几乎可以工作。但是 Popgalop 肯定也想要我正在寻找的同样的东西。而这个解决方案并不能 100% 解决问题。当您在左侧菜单中有更多内容而不是右侧的内容（主要内容）时，左侧菜单不会向上伸展以适应其元素的高度。如此简单的任务（例如在android ui中），我仍然找不到合适的解决方案:(

哦，你会爱我的——检查我的回答。因为我刚刚找到了解决方案。

【参考方案2】：

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

body,html
   height:100%;

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

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

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

【参考方案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/

【参考方案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*/

【参考方案5】：

您可以只修改您的 #navbar css 并将位置设置为固定

#navbar 
  background: #a8a599;

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

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

  width: 20%;
  height: 100%;

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

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

然后您可以根据需要添加顶部、底部、左侧或右侧

我把你的小提琴分叉了一个例子Here

更多关于floatW3 CSS Float的信息

更多关于positionW3 CSS Position的信息