web-dev-qa-db-fra.com

Faire défiler uniquement le contenu div, les autres doivent être corrigés

J'ai trois divs. J'ai besoin que les divs header et left_side soient fixes et que le contenu div soit fait défiler. Je cherchais une solution et j'ai trouvé quelque chose avec overflow et position . Mais je ne peux pas l'utiliser correctement. Comment puis-je faire ceci? Je serai reconnaissant pour chaque type de réponse. 

Picture

  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
 }
htmlcssscrolloverflowcss-position
17
jstorm31

overflow: auto; ajoute le défilement au 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
 }
18
Praveen
  • au début, vous aurez besoin d'une hauteur fixe pour la zone de contenu.
  • faites alors overflow:auto ici

ERREUR dans votre code :: vous voulez avoir une barre de défilement pour un div, mais vous déclarez cette hauteur de div comme étant auto

vous ne pouvez pas demander une barre de défilement lorsque la hauteur est automatique, pour avoir une barre de défilement, vous devez avoir une hauteur fixe pour cette div et lorsque la hauteur du contenu sera supérieure à la hauteur de la div, elle introduira automatiquement la barre de défilement

NOTE: donc les changements dans votre css seront

#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

10
Ritabrata Gautam

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;
}
1
Louis Ricci

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

1
Cody Guldner
#left_side{
    ...
    overflow:auto;  

}

Définissez également un padding-right pour créer un espace entre le contenu interne de div et la barre de défilement

0
Javier Puga

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

La réponse de Ritabrata est la bonne: si vous voulez qu'un élément spécifique ait des barres de défilement, vous devez définir sa hauteur (et/ou sa largeur) sur une taille fixe et le débordement sur auto.

Le code se trouve également 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>
0
John Pankowicz