div高度自适应的有关问题，两个叠加的div，怎么让IE不出现滚动条-HTML教程-爱易网页

div高度自适应的有关问题，两个叠加的div，怎么让IE不出现滚动条

日期：2014-05-17　浏览次数：20814 次

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   i

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

div高度自适应的有关问题，两个叠加的div，怎么让IE不出现滚动条

相关资料更多>

推荐阅读更多>