Défilement uniquement le contenu de la div, d'autres devraient être fixe

J'ai trois divs. J'ai besoin d'en-tête et left_side divs être fixe et le contenu de la div pour les faire défiler. J'ai été la recherche de solution et trouvé quelque chose avec débordement et position. Mais je ne peux pas l'utiliser corectly. Comment puis-je faire cela? Je vous en seront reconnaissants pour chaque type de réponse.

Défilement uniquement le contenu de la div, d'autres devraient être fixe

  HTML
------
<div id="header">

</div>

<div id="left_side">    
</div>

<div id="content">
</div


CSS
-----
body {   
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0px auto;
    font-family: Calibri, Georgia, Ubuntu-C;  
    font-size: 16px;
    margin-bottom: 20PX
}

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden; 
    position:absolute;
    font-size: 16px;
}

#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px
 }

OriginalL'auteur jstorm31 | 2013-07-30

  1. 18

    overflow: auto; ajoute le défilement quand le besoin

    #header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
    overflow: hidden;  //code added to prevent scroll
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden;  //code added to prevent scroll
    position:absolute;
    font-size: 16px;
}
#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px;
    overflow: auto;  //code added
 }
    height:auto ne va pas laisser la barre de défilement pour devenir visible, jamais. Il va plutôt faire défiler toute la page car la hauteur de l'adopter en fonction de son contenu.

    OriginalL'auteur Praveen

  2. 10
    • au premier abord, vous aurez besoin d'avoir une hauteur fixe pour la zone de contenu.
    • puis faire overflow:auto il

    ERREUR dans votre code:: vous voulez avoir une barre de défilement pour un div,mais vous êtes en déclarant que div hauteur auto

    vous ne pouvez pas exiger une barre de défilement lorsque la hauteur est automatique,pour avoir la barre de défilement, vous aurez besoin d'avoir une hauteur fixe pour que la div et lorsque le contenu de la hauteur sera supérieure div hauteur, il va introduire la barre de défilement automatiquement

    REMARQUE: de sorte que les modifications dans votre css sera

    #content{
 height: 300px;/*..very important if you want scroll bar...*/
 overfow:auto; /*..will introduce scroll bar when needed..*/
 padding: 20px;
 margin-left: 230px;
 margin-right: 20px;
padding-bottom: 30px
}

    EXEMPLE :: VIOLON

    OriginalL'auteur Ritabrata Gautam

  3. 1

    Si vous voulez l'en-tête et le côté gauche de rester dans leur position pendant le défilement, vous devrez utiliser position:fixed

    OriginalL'auteur Cody Guldner

  4. 1

    Vous pouvez simplement utiliser la position fixe. http://jsfiddle.net/Nrs2u/1/

    #header {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    background-color: purple;
}
#side {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 10%;
    width: 10%;
    height: 90%;
    background-color: red;
}
#body {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 90%;
    height: 300%;
    background-color: orange;
}

    OriginalL'auteur Louis Ricci

  5. 0
    #left_side{
    ...
    overflow:auto;  

}

    Un padding-right pour créer un espace entre les div à l'intérieur du contenu et de la barre de défilement

    OriginalL'auteur Javier Puga

  6. 0

    Comme un exercice d'apprentissage, j'ai décidé de mettre à jour la réponse en utilisant CSS3 Flexbox. J'ai aussi essayé de correspondre plus étroitement à la mise en page que jstorm31 essayait de créer.

    Ritabrata réponse est la bonne: Si vous voulez un élément spécifique pour avoir des barres de défilement, vous avez besoin de régler sa hauteur et/ou largeur) d'une taille fixe et de dépassement de capacité à l'auto.

    Code également être trouvés ici: Plunker

    style.css

    #header{
    overflow: hidden; 
    background-color: #880016; 
    height: 50px;
    border-bottom: 4px solid black;
    padding: 10px;
    font-size: 20px;
}
#side_and_content {
    display: flex;
}
#left_side{
    flex: 1;
    overflow:hidden; 
    background-color: #ED1B24;  
    height: 200px;
    border-right: 2px solid black;
    padding: 10px;
}
#content{
    flex: 5;
    overflow: auto;
    background-color: #FF7F26;   
    height: 200px;
    border-left: 2px solid black;
    padding: 10px;
}

    index.html

    <div id="header">
    header header header header header header
</div>
<div id="side_and_content">
    <div id="left_side">  
        left side left side left side left side left side
    </div>

    <div id="content">
CSS3 Flexbox Concepts: 
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
 (rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
 By default there is only one flex line per flex container.<br>
 It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout
    </div>
</div>

    OriginalL'auteur John Pankowicz