边栏和内容但没有内容隐藏在边栏内容下
问题描述:
我希望我的页面上有一个边栏和一个页面内容区域,边栏是固定的,您可以滚动页面内容。我明白了。我没有得到的是侧边栏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%,这是我想要的,(如果我删除侧边栏,我仍然有一个页面内容填补了entir e网页,我实际上只想填充75%的网页,以符合边栏的边缘。如果我将其设置为100%,则会填充整个网页而不是页面内容div。如果我没有将100%宽度的#pageContent放在内容中,我必须确保有足够的内容才能使div在页面的其余部分伸出,否则它只有几个像素宽(换句话说,宽度完全取决于它内部的内容,而不是一个固定的大小)。我还希望使用百分比,因为此网页将作为响应,并将调整为浏览器的大小。
谢谢!
答
我想我已经明白你想要什么,如果我有,那么这应该是您的修复:
/* 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%
才能正确设置内容分隔位置。