PDA

View Full Version : 100% column heights in IE 7



marcusr
27 Apr 2008, 1:30 AM
Hello,

I'm trying to create a view where I have two columns, one of which is an iframe.

If I create a column layout and add two panels, and set their height to be 100%, in Safari and Firefox the two panels take up 100% of the browser window height, as required. In IE7, they take up the smallest amount of space they can.

There seems to be some general issues with IE7 supporting height of 100%, but is there a way to get my iframe panel to take up all the height available for it?

In my HTML, I have the following:


<div id="display-frame" style="height:100%;background-color:blue">
<div style="width:100%;height:90%" id="display-iframe">this is a resource area </div>
</div>
<div id="frame" style="height:100%;background-color:green">
<iframe style="width:100%;height:90%" id="resource-iframe" src="http://www.google.com/"></iframe>
</div>


and I've simplified my extjs code down to:



var display_content = new Ext.Panel({
id:'display-content',
border:false,
ctCls:'inner-display-panel-class',
columnWidth:.5,
contentEl: 'display-frame'
});


var frame_content = new Ext.Panel({
columnWidth:.5,
border:false,
contentEl: 'frame',
ctCls:'iframe-display-panel-class'
});

var center_panel = new Ext.Panel({
layout:'column',
region:'center',
frame:false,
border:false,
id:'center-panel-p',
items:[display_content,frame_content]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[center_panel]
});



I've tried all manner of CSS height settings, but in IE7, the left hand div for example shows a blue background just for the height of the text, but the other browsers fill that column with blue, similarly the iframe in IE7 is about 100px high, in the other browsers it fills the column.

Is there a work around for IE7 height handling, or have I missed something in setting up my layout? Thanks!

marcusr
27 Apr 2008, 11:49 PM
Replying to my own post, I think the issue is that IE7 requires a chain of heights all the way back up the containers, right the way to the body. If any element in the chain doesn't have a height, it then doesn't know how to calculate the 100% height specified for the panel.

I can demonstrate this in html



<div style="height:100%>full height</div>


fills the screen, but



<div>
<div style="height:100%>full height</div>
</div>


doesn't fill the window.

Is Javascript the way forward here, or is there any CSS styling or Ext config values that can be set to propagate the proper height through?

weibeln
10 Nov 2008, 3:17 AM
Hi Marcus

did you solved the problem?
I have exactly the same issue

Thanks and have a nice day

nadir