html - 侧边栏和内容但没有内容隐藏在侧边栏内容下

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 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% 宽度，我必须确保我有足够的内容使它在页面的其余部分拉伸(stretch) 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 位置正确。