Установите div внутри div для прокрутки, в то время как родительский элемент не прокручивает

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

CSS

#container
{                
   position: absolute; 
   overflow: hidden; 
}

#comments
{
   position: relative;
   overflow: scroll; 
}

HTML

<div id="container">
   <div id="comments">
      this is what I want to scroll
   </div>
</div>

Я не могу избавиться от контейнера, потому что в нем есть еще много дочерних элементов. Я просто хочу, чтобы все остальное оставалось статичным, а только комментарии могут прокручиваться.

Ответ 1

Вам нужно установить определенную высоту в div "comments", чтобы убедиться, что он точно знает, когда нужно прокручивать. Если для заполнения этого контейнера недостаточно определенной длины, полоса прокрутки может появиться с overflow:scroll но она будет отключена. Если вы хотите, чтобы полоса прокрутки появлялась только тогда, когда она действительно нужна, вам нужно использовать overflow:auto как правило CSS. Установив высоту дочернего контейнера, а не родителя, родитель может расти по мере необходимости.

В вашем примере для получения решения не требуется position:absolute на родительском контейнере; однако вы можете включить это по какой-то другой причине.

Ответ 2

Он отключен, потому что для элемента нет определенной высоты. Автоматическая переполнения заполняет полосу прокрутки, если вы определяете высоту, а контент проходит мимо этой высоты.

#comments{
    height:200px;
    width:200px;
    position: relative;
    overflow: auto; 
}

Ответ 3

Вам нужно добавить ширину и высоту:

Проверьте этот JSFiddle: http://jsfiddle.net/FgGmQ/

HTML:

<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll, 
</div>
<span>The end of the container</span>

CSS:

#container{
    overflow: hidden;
}
#container span{
    background-color: yellow;   
}
#comments{
    overflow: auto; 
    height: 80px;
    width:150px;
}

Опять же, просто ознакомьтесь с этим JSFiddle