Setting grid div height and horizontal scrollbar

For reference:

The sample html has a note on the hypergrid div:
"recommended height: multiple of default row height, plus horizontal scroll bar height"

This affects how much the horizontal scroll bar will overlap the bottom row when the grid height is smaller than the data height. The horizontal scroll is only visible when the grid width or browser window is smaller than the data width. If the div height is set to exactly a multiple of the default row height, then the bottom row will be covered by the scroll bar and not selectable.

Calculating the grid div height:
Number of rows * default row height + "scroll offset"
"scroll offset" = default scroll bar height + modifier: 2 to 3

For example
If the default row height is 15px
and the default scroll bar height is 11px
and there are more than 4 rows of data
and 4 rows are to be displayed:
"scroll offset" = 11 + 3 = 14px
"grid div height" = 15*4 + 14 = 74px
73px is also good

It can be set in the div or in javascript
`

`
or
`options = { data: data, boundingRect: { height: '74px' } };`
`grid = new fin.Hypergrid(options);`
or
`grid.div.style.height = "74px";`

Outcomes for the "scroll offset":
+0px bottom row not selectable, covered by scroll bar
+1px can only select bottom row with mouse cursor on row above it and moving down, or moving to 1 pixel below the scroll bar
+2px to +12px bottom row selectable, partially covered by scroll bar
+13px good - scroll bar and bottom row touching
+14px good - scroll bar and bottom row have 1 pixel between them
+15px bottom row not selectable, covered by scroll bar

Note: When a cell in bottom row is highlighted with mouse and moving the mouse to the horizontal scroll bar, the highlight will go away, but the cell will not re-highlight upon mouse over. A neighboring cell has to be moused over and then move to the cell to re-highlight.