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

我希望我的页面上有一个边栏和一个页面内容区域，边栏是固定的，您可以滚动页面内容。我明白了。我没有得到的是侧边栏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在页面的其余部分伸出，否则它只有几个像素宽（换句话说，宽度完全取决于它内部的内容，而不是一个固定的大小）。我还希望使用百分比，因为此网页将作为响应，并将调整为浏览器的大小。

谢谢！

来源

2017-08-03 Macast

我想我已经明白你想要什么，如果我有，那么这应该是您的修复：

/* 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%才能正确设置内容分隔位置。

来源

2017-08-03 17:48:24 CaptainAmericaIRL

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

回答

相关问题