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

Make navigation bar take up entire page height in css(使导航栏在css中占据整个页面高度)
本文介绍了使导航栏在css中占据整个页面高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the navigation bar no longer continues.

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

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

However i would like to make the height of the navigation bar the height of the document. I feel like i might need java script for this, however i am new to java-script, so i am not sure how i would accomplish this. I thought making the height 100% would make it take up the whole page, owever it only takes up the visible part of the page.

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

Here it is on fiddle if you want to look at the rest of the page http://jsfiddle.net/HRpXV/3/embedded/result/

推荐答案

100% 不适用,因为它是浮动的.将父容器改为position: relative,将导航栏改为position: absolute即可解决问题.

100% does not apply because it is floated. Change the parent container to position: relative and the navbar to position: absolute will solve the problem.

#container{
    position: relative;
}

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

演示

这篇关于使导航栏在css中占据整个页面高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Evenly spaced list items(均匀分布的列表项)
Position: sticky - scroll bouncing when combined with javascript height adjustment(位置:粘性 - 结合 javascript 高度调整时滚动弹跳)
Flexslider arrows not displayed properly(Flexslider 箭头未正确显示)
How do I center the Zurb Foundation top bar nav?(如何使 Zurb Foundation 顶部栏导航居中?)
Make whole lt;ligt; as link with proper HTML(让整个lt;ligt;作为与正确 HTML 的链接)
CSS radial menu(CSS 径向菜单)