サイドバーとコンテンツがサイドバーのコンテンツの下に隠れていない

Question

サイドバーとページコンテンツエリアが私のページにあり、サイドバーが固定されており、ページコンテンツをスクロールすることができます。私はそれを持っている。私が持っていないのは、サイドバーdivが独立していて、サイドバーdivがページコンテンツの上に単に表示されるのではなく、独自のプロパティを持つことです。これ以上の情報は私に知らせてください。私はおそらく何か本当に基本的なものを欠いているでしょう

私はサイドバーのdivがあります、

/* 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; 
} 

事がある：

<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を持っていますページのコンテンツがページの100％を占めています。これは私が望むものです（サイドバーを削除すると、まだエントリーを埋めるページコンテンツがあります私は実際にはサイドバーのエッジを満たすために、その約75％を満たすだけのeウェブページです。 100％に設定すると、ページコンテンツdivではなくウェブページ全体が塗りつぶされます。 #pageContentを100％の幅で配置しないと、ページの残りの部分にdivを伸ばすのに十分なコンテンツがあることを確認する必要があります。それ以外の場合は幅が数ピクセルにすぎません（つまり、幅は、固定サイズではなく、内部の内容に完全に依存します）。このWebページは応答となり、ブラウザのサイズに合わせてサイズが変更されるため、パーセンテージを使用することもお勧めします。

ありがとうございました！

私はあなたが望むものを理解していると私は持っている場合、これはあなたの修正されるべきだと思う

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%を追加する必要があります。