div高度自适应的问题，两个叠加的div，如何让IE不出现滚动条？
<div style="border-style:solid; border-width:1px; width: 100%; height: 100%;" id="layer1">
<div id="header" style="WIDTH:100%;height:22px;">header</div>
<div id="context" style="border-style:solid; border-width:1px; width: 100px; height: 100%;">context</div>
</div>
如果让context的div可以自适应layer1的高度而不出现滚动条？
[解决办法]
如果把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上，height:100% 在ie6下无效。
而且js计算窗口的宽度高度，对于不同浏览器是有差异的，现提供函数getSize()消除这些差异。
这个问题不用js 实在想不到方法
在onload 和 onresize 事件里重新定义2个div的高度吧。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>body{margin:0px}</style><div style="background:red;overflow:hidden;" id="layer1"> <div id= "header" style= "WIDTH:100%;height:22px; "> header </div> <div id= "context" style= "border-style:solid; border-width:1px; width: 100px; height: 100%; "> context </div></div><script type="text/javascript"><!--function getSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; y = pageHeight; } else { pageHeight = yScroll; y = pageHeight; } if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize;}//这段代码用来获取目标页的参数，包括页面宽、高，屏幕宽、高，分别装入数组arrayPageSize[0]、[1]、[2]、[3]window.onload = function(){ document.getElementById('layer1').style.height = getSize()[3] + 'px' document.getElementById('context').style.height = getSize()[3] - 24 + 'px'} window.onresize = function(){ document.getElementById('layer1').style.height = getSize()[3] + 'px' document.getElementById('context').style.height = getSize()[3] - 24 + 'px'}//--></script>
[解决办法]
纯CSS不可能，因为有一个事件需要响应！可以把代码都集合在css样式里面，不过资源占有会大一些！
- JScript code
<div style= "border-style:solid; border-width:1px; width: 100%; height: 100%; " id= "layer1"> <div id= "header " style= "WIDTH:100%;height:22px; "> header </div> <div id= "context " style= "border-style:solid; border-width:1px; width: 100px; height:expression(window.onresize=new function(){document.getElementById('layer1').clientHeight-22})"> context </div> </div>