How to create a scrollable Div Tag Vertically

Question

I want to create a scrollable div tag with a fixed height that gets a vertical scroll bar. I'm trying to get this to work in chrome.

This is my CSS:

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

It does show the vertical scroll bar but the problem is during the run-time when the user adds some content to the #designDiv. It does not scroll and the #designDiv begins to expand vertically.

How do I create a scrollable div tag vertically for chrome?

User · Accepted Answer

Well  your code worked for me  running Chrome 5 0 307 9 and Firefox 3 5 8 on Ubuntu 9 10   though I switched  overflow-y  scroll    to  overflow-y  auto    Demo page over at  http   davidrhysthomas co uk so tableDiv html   xhtml below    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt    lt head gt       lt META http-equiv  Content-Type  content  text html  charset UTF-8  gt        lt title gt Div in table lt  title gt       lt link rel  stylesheet  type  text css  href  css stylesheet css    gt            lt style type  text css  media  all  gt           th       border-bottom  2px solid  ccc             th td        padding  0 5em 1em                   margin  0                  border-collapse  collapse                             tr td first-child                  border-right  2px solid  ccc              td  gt  div     width  249px                  height  299px                  background-color Gray                  overflow-y  auto                  max-width 230px                  max-height 100px                             lt  style gt        lt script type  text javascript  src  js jquery js  gt  lt  script gt        lt script type  text javascript  gt        lt  script gt    lt  head gt    lt body gt    lt div gt        lt table gt            lt thead gt               lt tr gt  lt th gt This is column one lt  th gt  lt th gt This is column two lt  th gt  lt th gt This is column three lt  th gt           lt  thead gt              lt tbody gt               lt tr gt  lt td gt This is row one lt  td gt  lt td gt data point 2 1 lt  td gt  lt td gt data point 3 1 lt  td gt               lt tr gt  lt td gt This is row two lt  td gt  lt td gt data point 2 2 lt  td gt  lt td gt data point 3 2 lt  td gt               lt tr gt  lt td gt This is row three lt  td gt  lt td gt data point 2 3 lt  td gt  lt td gt data point 3 3 lt  td gt               lt tr gt  lt td gt This is row four lt  td gt  lt td gt  lt div gt  lt p gt 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  lt  p gt  lt  div gt  lt  td gt  lt td gt data point 3 4 lt  td gt               lt tr gt  lt td gt This is row five lt  td gt  lt td gt data point 2 5 lt  td gt  lt td gt data point 3 5 lt  td gt               lt tr gt  lt td gt This is row six lt  td gt  lt td gt data point 2 6 lt  td gt  lt td gt data point 3 6 lt  td gt               lt tr gt  lt td gt This is row seven lt  td gt  lt td gt data point 2 7 lt  td gt  lt td gt data point 3 7 lt  td gt           lt  body gt          lt  table gt    lt  div gt    lt  body gt    lt  html gt

User · Answer

Adding overflow auto before setting  overflow-y seems to do the trick in Google Chrome         width 249px      height 299px      background-color Gray      overflow  auto      overflow-y  scroll      max-width 230px      max-height 100px

User · Answer

This code creates a nice vertical scrollbar for me in Firefox and Chrome   x000D   x000D   answerform     position  absolute    border  5px solid gray    padding  5px    background  white    width  300px    height  400px    overflow-y  scroll    x000D   lt div id  answerform  gt    badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt  mushroom    lt br gt  lt br gt mushroom lt br gt  lt br gt  a badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt badger lt br gt  lt br gt   lt  div gt  x000D   x000D   x000D   Here is a JS fiddle demo proving the above works

[css] How to create a scrollable Div Tag Vertically?

The answer is

Examples related to css

Examples related to html

Examples related to overflow

Examples related to vertical-scrolling

Tags