Прокрутка только содержимого div, другие должны быть исправлены

У меня есть три div. Мне нужно, чтобы заголовки и left_side divs были исправлены, а div для прокрутки контента. Я искал решение и нашел что-то с переполнением и позицией. Но я не могу использовать его по-другому. Как я могу это сделать? Я буду благодарен за каждый ответ.

  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
 }

Ответ 1

overflow: auto; добавляет прокрутку при необходимости

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

Ответ 2

сначала вам потребуется фиксированная высота для области содержимого.
затем сделайте overflow:auto там

ОШИБКА в вашем коде:: вы хотите иметь полосу прокрутки для div, но вы объявляете, что высота div как auto

Вы не можете прокручивать полосу прокрутки, когда высота автоматически, для того чтобы иметь полосу прокрутки, вам нужно иметь фиксированную высоту для этого div, а когда высота содержимого будет больше, чем высота div, она автоматически вводит полосу прокрутки.

ПРИМЕЧАНИЕ:, поэтому изменения в вашем css будут

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

ПРИМЕР:: FIDDLE

Ответ 3

Вы можете просто использовать фиксированную позицию. 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;
}

Ответ 4

Если вы хотите, чтобы заголовок и левая сторона оставались в их положении во время прокрутки, вам нужно будет использовать position:fixed

Ответ 5

В качестве учебного упражнения я решил обновить ответ, используя CSS3 Flexbox. Я также попытался более точно сопоставить макет, который пыталась создать jstorm31.

Правильный ответ Ritabrata: если вы хотите, чтобы у определенного элемента были полосы прокрутки, вам нужно установить его высоту (и/или ширину) на фиксированный размер и переполнение на авто.

Код также можно найти здесь: 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>

Ответ 6

#left_side{
    ...
    overflow:auto;  

}

Установите также padding-right, чтобы создать пробел между внутренним содержимым div и полосой прокрутки