Barre latérale et contenu mais sans contenu caché sous le contenu de la barre latérale

Question

Je voudrais une zone latérale et une zone de contenu de page sur ma page, avec la barre latérale étant fixe et vous pouvez faire défiler le contenu de la page. J'ai ça. Ce que je n'ai pas, c'est que le div sidebar est indépendant et possède ses propres propriétés, plutôt que d'afficher simplement le div sidebar au-dessus du contenu de la page. Plus d'informations juste faites le moi savoir. Il me manque probablement quelque chose de vraiment basique.

je un div sidebar:

<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> 

et j'ai mon contenu 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> 

et je le CSS pertinent:

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

La chose est, la le contenu de la page remplit 100% de la page, ce qui est ce que je veux, (si je supprime la barre latérale, j'ai toujours un contenu de page qui remplit l'intégralité La page Web, que je voudrais seulement remplir environ 75% de celui-ci, pour atteindre le bord de la barre latérale. Si je le mets à 100%, il remplit toute la page Web plutôt que le div contenu de la page. Si je ne mets pas #pageContent avec une largeur de 100%, je dois m'assurer que j'ai assez de contenu pour l'étirer sur le reste de la page, sinon ce n'est que quelques pixels de large (en d'autres termes, le la largeur dépend entièrement du contenu à l'intérieur, plutôt que d'être une taille fixe). Je préférerais également utiliser des pourcentages car cette page Web sera la réponse et redimensionnera à la taille du navigateur.

Merci!

Answer 1

Je crois avoir compris ce que vous voulez et si je dois, cela devrait être votre solution:

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

Cela rendra votre barre latérale prendre jusqu'à 25% de la page et le contenu prendre 75 % nous devons ajouter le left: 25% pour rendre la position div de contenu correctement.