jquery - 将高度 100% 设置为绝对 div

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)高度