Как создать прокручиваемый Div Tag по вертикали?

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

Это мой CSS:

#designDiv
{
 width:249px;
 height:299px;
 background-color:Gray;
 overflow-y: scroll;
 max-width:230px;
 max-height:100px;
}

Он показывает вертикальную полосу прокрутки, но проблема возникает во время выполнения, когда пользователь добавляет некоторый контент в #designDiv. Он не прокручивается, а #designDiv начинает расширяться вертикально.

Как создать прокручиваемый тег div по вертикали для chrome?

3 ответа

Хорошо, ваш код работал у меня (работает с Chrome 5.0.307.9 и Firefox 3.5.8 на Ubuntu 9.10), хотя я переключил

overflow-y: scroll;

к

overflow-y: auto;

Демо-страница за: http://davidrhysthomas.co.uk/so/tableDiv.html.

xhtml ниже:

<title>Div in table</title>
 
 
 
 
<div>
 <table>
 <thead>
 <tr><th>This is column one</th><th>This is column two</th><th>This is column three</th>
 </tr></thead>
 <tbody>
 <tr><td>This is row one</td><td>data point 2.1</td><td>data point 3.1</td>
 </tr><tr><td>This is row two</td><td>data point 2.2</td><td>data point 3.2</td>
 </tr><tr><td>This is row three</td><td>data point 2.3</td><td>data point 3.3</td>
 </tr><tr><td>This is row four</td><td><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies mattis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a accumsan purus. Vivamus semper tempus nisi et convallis. Aliquam pretium rutrum lacus sed auctor. Phasellus viverra elit vel neque lacinia ut dictum mauris aliquet. Etiam elementum iaculis lectus, laoreet tempor ligula aliquet non. Mauris ornare adipiscing feugiat. Vivamus condimentum luctus tortor venenatis fermentum. Maecenas eu risus nec leo vehicula mattis. In nisi nibh, fermentum vitae tincidunt non, mattis eu metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel est purus. Ut accumsan, elit non lacinia porta, nibh magna pretium ligula, sed iaculis metus tortor aliquam urna. Duis commodo tincidunt aliquam. Maecenas in augue ut ligula sodales elementum quis vitae risus. Vivamus mollis blandit magna, eu fringilla velit auctor sed.</p></div></td><td>data point 3.4</td>
 </tr><tr><td>This is row five</td><td>data point 2.5</td><td>data point 3.5</td>
 </tr><tr><td>This is row six</td><td>data point 2.6</td><td>data point 3.6</td>
 </tr><tr><td>This is row seven</td><td>data point 2.7</td><td>data point 3.7</td>
 
 </tr></tbody></table>
</div>


Этот код создает приятную вертикальную полосу прокрутки для меня в Firefox и Chrome:

CSS

#answerform{
 position: absolute;
 border: 5px solid gray;
 padding: 5px;
 background: white;
 width: 300px;
 height: 400px;
 overflow-y: scroll;
}

HTML:

<div id="answerform">
 badgerbadgerbadgerbadgerbadger
 mushroommushroom
 a badgerbadgerbadgerbadgerbadger
</div>

Вот демонстрационная версия JS, доказывающая вышеприведенные работы.


Добавление overflow:auto перед установкой overflow-y похоже на трюк в Google Chrome.

{
 width:249px;
 height:299px;
 background-color:Gray;
 overflow: auto;
 overflow-y: scroll;
 max-width:230px;
 max-height:100px;
}

licensed under cc by-sa 3.0 with attribution.