Question

我有一个侧边栏菜单：

HTML

<div class="container right-menu">
    <nav class="panel-nav">
        <ul>
            <li><a href="#about us">About us</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contacts">Contacts</a></li>
        </ul>
    </nav>
</div>

CSS

.right-menu {
    position: relative;
    height: 100%;
}
.panel-nav {
    position: absolute;
    right: 0;
    float: right;
    width: 195px;
    min-height: 100%;
    padding: 87px 0 0 21px;
    margin-right: -59px;
    background: #f6f6f3;
    box-shadow: inset 7px 0 5px -6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    z-index: 2;
}

我需要做的是panel-nav是页面的完整高度。但是现在，这个div的高度等于里面内容的高度。如何解决？

Answer 1

只需将父级div的100%更改为100vh即可实现此目的：

.right-menu {
   position: relative;
   height: 100vh;
}

Jsfiddle：http://jsfiddle.net/rycpx4g2/

vh是一个CSS3衡量单位，代表viewport height

Answer 2

您可以在绝对位置元素处设置top: 0和bottom: 0，以便根据相对定位的父元素达到100％的高度：

.panel-nav {
   position: absolute;
   top: 0;
   bottom: 0;
}

修改

每次滚动时，您都可以使用jQuery并将新的顶部位置设置为.panel-nav。

$(window).scroll(function() { var top = $(window).scrollTop(); $('.panel-nav').css({'top': top + 'px'}); });

＆＃13;
＆＃13;
#parent { position: relative; border: 1px solid #333; width: 200px; height: 300px; float: left; } #child { position: absolute; top: 0; bottom: 0; width: 100%; background-color: red; }
＆＃13;
<div id="parent"> <div id="child"> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

看到这个小提琴：http://jsfiddle.net/Bek9L/1879/

<强> HTML

<div class="container">
    <div class="sidebar">
        <p>This is a side bar</p>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum.</div>
</div>

<强> CSS

html, body{
    width: 100%;
    margin:0;
    padding:0;
}
.container{
    border:1px solid red;
    position:relative;
}
.content{
    width:75%;
    margin-left:25%;
}
.sidebar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:25%;
    height:100%;
    background:gray;
}

Answer 4

这里的问题是身高，解决它将html和body的高度添加到100％

即

html,body{
        height:100%;
         padding:0;
          margin:0;
    }

的jsfiddle http://jsfiddle.net/swapnilmotewar/03mjryjw/1/

Answer 5

使用position: absolute;时，您不会设置height值。

您应该使用top: 0, bottom: 0;来达到100％的身高。

如果您想确保在滚动窗口时这不会改变，请使用position: fixed;

Answer 6

使用这种方式非常简单第1步创建一个空洞div并使用padding-right放置内容第2步里面再做一个div设置一个位置：固定;并设置高度和颜色

检查代码并轻松执行此操作enter code here http://jsfiddle.net/simeon1929/h3sqe9re/15/

将高度100％设置为绝对div

6 个答案: