NorthStarDA
IS-IT--Management
i have a div on my page that has a header and a footer div inside of it, both with say '20px' height. the scrolling content div is set to 200px height. the main enclosing div has a height of say 80%, so when the window resizes, the main div resizes, but not the scrolling div inside (obviously), so i have been writing a javascript function to resize the scrolling divs when the window resizes, but it is very glitchy, the div resizes, but other parts of the layout start moving around which i cannot explain. in case that was not written clearly, i need to have:
div 80% height, 50% width
--------------------------------
| HEADER 20px HIGH ALWAYS |
--------------------------------
| scrolling div, variable |
| height, when page |
| resizes, resize this |
--------------------------------
| FOOTER 20px HIGH ALWAYS |
--------------------------------
what's the best way to do this, i've been trying on and off for weeks to come up with a nice clean way to handle this and i am really no closer, here is the script that seems to change more than it's supposed to
=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison
div 80% height, 50% width
--------------------------------
| HEADER 20px HIGH ALWAYS |
--------------------------------
| scrolling div, variable |
| height, when page |
| resizes, resize this |
--------------------------------
| FOOTER 20px HIGH ALWAYS |
--------------------------------
what's the best way to do this, i've been trying on and off for weeks to come up with a nice clean way to handle this and i am really no closer, here is the script that seems to change more than it's supposed to
Code:
function resizeContent(){
var divs = getElementsByClass('resize');
for(i=0;i<divs.length;i++){
var tbl = document.getElementById(divs[i].id + '_outerTable'); //find the outer container
var ctr = document.getElementById(divs[i].id + '_controlHeight');//find the footer
divs[i].style.height = (parseInt(tbl.scrollHeight) - parseInt(ctr.value)) + 'px'; //resize the scrolling content to the height of the container minus the footer
}
}=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison
