Overflow issue in CSS

i have an iframe on my page and seem to be facing somewhat common issue... E Actually there are 2 iframes ... 1. Header iframe which has table with some columns... 2. Content iframe which has table with column data..

Now the 2 iframe tables are aligned vertically...

The alignment works fine if the columns are less and there is no scrollbar in the 2nd iframe..

But if the columns increase, I get a horizontal scrollbar in "on开发者_如何转开发ly" the content iframe and as i scroll it I have a sync JS which scrolls the top iframe as well..Now at the end bcoz of the scrollbars occupying space, the vertical alignment gets disturbed..

As this seems to be a typical issue, does anyone have asolution which would be really helpful. I am open to CSS/Js approach as well..Thank you..

you could adjust the height of the iframe if the scrollbars are present, just check the iframes scrollWidth against it's offsetWidth and if the scroll width is higher, increase the height of the iframe by the height of the scrollbar, prolly 5-10px, I'd have to check to be sure.

Something like:

$('#my_frame).ready(function(){
  if(this.scrollWidth>this.offsetWidth){
    $(this).css({height:'+=10'});
  }
}