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

Posted

技术标签:

【中文标题】使导航栏在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的信息

【讨论】:

以上是关于使导航栏在css中占据整个页面高度的主要内容,如果未能解决你的问题,请参考以下文章

web如何将顶部导航栏内容显示在两边位置

如何使我的导航栏在滚动时变为半透明?

Bootstrap 导航栏在折叠时不会打开

Bootstrap 4中的导航栏药丸颜色以填充整个高度

我在 Bootstrap4 中提到了修复导航栏。但是导航栏在我的代码中溢出

如何让我的导航栏在滚动通过锚点时更改 CSS 类?