使导航栏在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
更多关于float
W3 CSS Float的信息
更多关于position
W3 CSS Position的信息
【讨论】:
以上是关于使导航栏在css中占据整个页面高度的主要内容,如果未能解决你的问题,请参考以下文章