Прокручиваемый div (высота div> высота браузера)

Question

Прокручиваемый div легко реализовать, если его высота меньше высоты окна браузера. Пример: https://jsfiddle.net/y59ttm8s/4/ Вы можете прокрутить красный div с помощью «внутренней полосы прокрутки», и все в порядке.

HTML

<div class="scrollable"> 
    <div class="content"></div> 
</div> 

CSS

.scrollable { 
    margin-left: 30px; 
    float: left; 
    height: 400px;  // with a fixed height! 
    width: 65px; 
    background: red; 
    overflow-y: scroll; 
} 

.content { 
    height: 1450px; 
} 

Теперь проверьте пример модифицированный: https://jsfiddle.net/y59ttm8s/5/ где высота прокрутки DIV составляет 100%. Я больше не могу прокручивать с помощью внутренней полосы прокрутки, только с помощью полосы прокрутки браузера.

CSS обновленный

.scrollable { 
    margin-left: 30px; 
    float: left; 
    height: 100%;      // 100% ! 
    width: 65px; 
    background: red; 
    overflow-y: scroll; 
} 

.content { 
    height: 1450px; 
} 

Итак, как я могу заставить прокручивать с Div в скроллинга вместо одного браузера?

Answer 1

Вы должны указать высоту body, иначе scrollable не имеет, откуда взять высоту.

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.scrollable { 
 
\t margin-left: 30px; 
 
\t float: left; 
 
\t height: 100%; 
 
\t width: 65px; 
 
\t background: red; 
 
\t overflow-y: scroll; 
 
} 
 

 
.content { 
 
\t height: 1450px; 
 
}

<div class="scrollable"> 
 
    <div class="content"> 
 
      
 
    </div> 
 
</div> 
 

Второй вариант заключается в изменении его области просмотра единиц.

html, body { 
 
    margin: 0; 
 
} 
 
.scrollable { 
 
\t margin-left: 30px; 
 
\t float: left; 
 
\t height: 100vh; 
 
\t width: 65px; 
 
\t background: red; 
 
\t overflow-y: scroll; 
 
} 
 

 
.content { 
 
\t height: 1450px; 
 
}

<div class="scrollable"> 
 
    <div class="content"> 
 
      
 
    </div> 
 
</div> 
 

Answer 2

Надеется, что это дано ниже фрагмента коды поможет вам.

body{margin:0; padding:0;} 
 
.scrollable { 
 
    margin:0;padding:0; 
 
\t margin-left: 30px; 
 
\t height: 100%; 
 
\t width: 65px; 
 
\t background: red; 
 
\t overflow-y: scroll; 
 
    position:absolute; 
 
    top:0; 
 
} 
 

 
.content { 
 
\t height: 1450px; 
 
}

<div class="scrollable"> 
 
    <div class="content"></div> 
 
</div>