Statique/Fixe la barre latérale et le Fluide Contenu

J'ai trois DIVs, l'un est l'en-tête en haut, qui doit être fixe (ne doit pas faire défiler), la largeur est de 100%, hauteur de 50px; l'autre est une barre latérale à gauche, qui doit être à 100% de navigateur, la hauteur, la largeur fixe de 200px et une autre DIV pour le contenu principal de la droite qui sera fluide dans la largeur, qui est de 100% de la largeur restante (total moins 200px).

Contenu dans le DIV du contenu principal doit de défilement verticale de contenu se développe, mais la barre latérale à gauche et en-tête de la DIV doit rester comme il est. YouTube la page d'accueil est le parfait exemple de ce que je veux atteindre. J'ai essayé tous les types de position et de la largeur, mais sans succès. HTML est comme ceci:

<div id="header"></div>
<div id="parent">
    <div id="sidebar"></div>
    <div id="main-content"></div>
</div>

Edit:

De base code CSS, je suis en train est:

#header {
    position: fixed;
    width: 100%;
    height: 50px;
}
#sidebar {
    position: fixed;
    width: 220px;
    height: 100%;
}
#main-content {
    position: relative;
    left: 220px;
    width: 100%;
    height: 300px; /*This could be anything, content should scroll vertical*/
}
Poste ton code CSS

OriginalL'auteur Forthaction | 2014-09-20

  1. 6

    Simple code css :

    body {
    padding: 0;
    margin: 0;
}
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    background-color: red;
}
#sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    background-color: green;
}
#parent {
    margin-top: 50px;
    margin-left: 200px;
    background-color: blue;
}

    Exemple :
    http://jsfiddle.net/rp4ss12b/

    Votre barre du haut et bar à côté de la doivent être position: fixed;. Ensuite, votre contenu principal besoin d'avoir un margin-top (afin de ne pas être caché par la barre du haut) et un margin-left (afin de ne pas être caché par la barre latérale).

    Ohh, vous n'avez pas utiliser n'importe quelle hauteur de 100%, au lieu de la position des zéros. C'est parfait, j'ai fait le top: 50px dans #sidebar de sorte que la barre latérale est au-dessous de l'en-tête.
    Je n'aime pas utiliser la largeur à 100% ou à hauteur de 100% en raison des limites que vous avez sur l'ajout des remplissages et des frontières.
    Le jsfiddle fait très clair. Merci!

    OriginalL'auteur GramThanos