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

时间:2017-08-03 17:25:12

标签: html css css3 sidebar

我想在我的页面上添加侧边栏和页面内容区域,侧边栏已修复,您可以滚动页面内容。我有那个。我没有得到的是侧边栏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,否则它只有几个像素宽(换句话说,宽度完全取决于其内部的内容,而不是固定的大小我也更喜欢使用百分比,因为这个网页会响应,并会调整大小到浏览器的大小。

谢谢!

1 个答案:

答案 0 :(得分:0)

我想我已经理解了你想要什么,如果我有,那么这应该是你的解决方法:

/* 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位置。