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

Question

У меня есть три 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 
} 

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

Answer 2

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

Answer 3

• сначала вам нужно иметь фиксированную высоту для контента. а.
• затем сделать overflow:auto там

Ошибка в коде :: Вы хотите иметь полосу прокрутки для DIV, но вы объявляете, что высота Див, как auto

вы наклоненная требуют прокрутки bar, когда высота будет автоматической, чтобы иметь полосу прокрутки, вам нужно будет иметь фиксированную высоту для этого 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

Answer 4

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

Answer 5

#left_side{ 
    ... 
    overflow:auto; 

} 

Набор также padding-right создать пространство между внутренним содержанием Див и скроллингом

Answer 6

В качестве учебного упражнения, я решил обновить ответ с помощью 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>