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

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

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

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

相关资料更多>

  1. 大家帮小弟我看一下，这段CSS什么意思
  2. ie5中对padding值如何判断　　　
  3. HTML工具种
  4. HTML多文件下传
  5. 怎么改变fieldset的边框颜色
  6. HTML标签图片alt在优化中的慎重运用
  7. 需要对三种浏览器情况作判断,该怎么解决
  8. 模板可编辑区域变动有关问题
  9. CSS根本（初尝）