补充工具栏和内容，但没有内容隐藏在补充工具栏内容下

Question

我希望页面上有一个侧边栏和一个页面内容区域，并且侧边栏是固定的，您可以滚动页面内容。 我知道了 我没有得到的是侧边栏div是独立的并具有自己的属性，而不是侧边栏div仅显示在页面内容上方。 有更多信息可让我知道。 我可能缺少一些非常基本的东西。

我有一个侧边栏div：

<div id="sidebar">
        <a href="index.html"><img src="images/logo/mdLogo.png"></a>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">PHOTOGRAPHY</a></li>
                <li><a href="#">GRAPHIC DESIGN</a></li>
                <li><a href="#">3D MODELLING</a></li>
            </ul>
        </nav>
</div>

并且我有我的内容div：

<div id="pageContent">
        <!-- Parallax -->
        <div class="parallaxImage1"></div>

        <div class="parallaxContent">
            <h1>A little about me...</h1>
            <p>Information goes here.</p>
        </div>

        <div class="parallaxImage1"></div>
    </div>

而且我有相关的CSS：

/* Sidebar */
#sidebar {
    background-color: #ffffff;
    width: 405px;
    height: 100%;
    padding: 10px;
    float: left;
    position: fixed;
    z-index: 1;
}

/* Page Content */
#pageContent {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #212121;
    position: absolute;
}

事实是，页面内容正在填充100％的页面，这正是我想要的（（如果删除侧边栏，我仍然有一个页面内容将填充整个网页，而实际上我只希望填充大约75％的页面）如果要将其设置为100％，那么它将填充整个网页，而不是页面内容div。如果我不将#pageContent的宽度设置为100％，则必须确保有足够的内容可以使div延伸到页面的其余部分，否则宽度只有几个像素（换句话说，宽度完全取决于其内部的内容，而不是固定的大小）。也希望使用百分比，因为此网页将是响应性的，并将调整为浏览器的大小。

谢谢！

Answer 1

我想我已经了解了您想要的内容，如果有，那么这应该是您的解决方法：

/* Sidebar */
#sidebar {
    background-color: #ffffff;
    width: 25%;
    height: 100%;
    padding: 10px;
    float: left;
    position: fixed;
    z-index: 1;
}

/* Page Content */
#pageContent {
    display: block;
    height: 100%;
    width: 75%;
    left: 25%;
    background-color: #212121;
    position: absolute;
}

这将使您的侧边栏占据页面的25％，内容占据75％。 我们必须添加left: 25%来正确设置内容div的位置。