我遇到了左侧导航栏设计的问题。具体来说,我希望条形图的灰色在整个页面中垂直显示。
现在,灰色条刚停在视口的末尾。有没有办法将条形扩展到无穷大?
以下是垂直导航栏的CSS代码段:
#navbar{
height: 100%;
position: absolute;
width: 70px;
background-color: #5e5e5e;
}
答案 0 :(得分:2)
在这种情况下,您可以相对定位body
元素。这样,#menu
相对于body
绝对定位。在此之前,#menu
元素相对于窗口绝对定位,这就是它在视口处结束的原因。
body {
position: relative;
}
#menu {
position: absolute;
border-right: 1px solid black;
top: 0;
bottom: 0;
}