this javascript gives you an iframe-type floating layer.
01 <style type="text/css">
02 #thingy {
03 width: 300px;
04 height: 250px;
05 overflow: auto;
06 padding-left: 5px;
07 padding-right: 3px;
08 background: white;
09 }
10 #sizer {
11 position: absolute;
12 top: -100px;
13 display: none;
14 }
15 .divtext {
16 font: 200 14px helvetica,arial,verdana,sans-serif;
17 }
18 </style>
19 <script type="text/javascript">
20 function getElement(id)
21 {
22 return document.getElementById ? document.getElementById(id) :
23 document.all ? document.all(id) : null;
24 }
25 function get_lineheight(id)
26 {
27 var el = getElement(id);
28 if(el && typeof el.offsetHeight != 'undefined')
29 return el.offsetHeight;
30 }
31 function setScrollDIVht(id)
32 {
33 var lineheight = get_lineheight('sizer');
34 var el = getElement(id);
35 var elHt = el.offsetHeight;
36 if(el && el.style)
37 el.style.height = String(elHt + (lineheight - (elHt%lineheight)) + 'px');
38 }
39 </script>
40 <span id="sizer" class="divtext"><br /></span> <!-- use <br /> to sample line height -->
41 <div id="thingy" class="divtext"> <!-- assign text class to both elements -->
42 <script type="text/javascript">
43 for (i=0;i<400;i++) document.write('blah '); //filler
44 </script>
45 </div>
46 <script type="text/javascript">
47 setScrollDIVht('thingy');
48 </script>
49 <form style="margin-top:10px;">text-size:
50 <select
51 onchange="x=options[selectedIndex].value;
52 getElement('sizer').style.fontSize=getElement('thingy').style.fontSize=x;
53 setScrollDIVht('thingy')">
54 <option value="11px">11px</option>
55 <option value="13px">13px</option>
56 <option value="14px" selected="selected">14px</option>
57 <option value="16px">16px</option>
58 <option value="22px">22px</option>
59 <option value="32px">32px</option>
60 </select>
61 </form>