Странное поведение "overflow: auto" на Chrome

Я разрабатываю сайт с разделом блога. Мне нужно, чтобы эта секция имела фиксированную высоту. Для того, чтобы иметь возможность видеть все сообщения в блоге, я добавил overflow: auto, так что он показывает полосу прокрутки, когда это необходимо.

<div id="container">
<div id="content">
    <div class="post">
         This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    ....
    ....
    ....
    ....
</div>
</div>

#container {
    overflow: hidden;
}

#content {
    height: 200px;
    overflow: auto;
    border: 1px solid red;
}

.post {
    margin: 20px 0;
}

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

Я создал скрипку, но я не могу воспроизвести поведение Chrome там:

Http://jsfiddle.net/u5d56/3/

Использование overflow: scroll вместо auto дает мне те же результаты.

Есть идеи?

Заранее спасибо

2 8
html css google-chrome overflow

2 ответа:

Я нашел решение моей проблемы. По какой-то причине, чтобы это работало в Chrome, мне пришлось добавить положение: относительное правило к # content: 

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}
11

Возможный ответ из основ разработки приложений HTML5 

#content{
     height: 200px;
     region-overflow:auto;
     overflow:visible;
     border 1px solid red;
}

Теперь это больше похоже на адаптивный дизайн. Add-webkit-before overflow может помочь, так как это только проблема chrome. Предположим, что это CSS3.

#content {
    height: 200px;
    overflow: auto;
    -webkit-overflow: auto;
    border: 1px solid red;
}
-1