使用Javascript将DIV height设置为100%会导致跨浏览器问题

我需要一个边栏

div

和一个内容

div

，其高度始终为容器高度的100%，无论内容如何。窗口大小更改时，容器大小也会更改。我不能用背景来伪装效果。我必须为IE6设计，并决定使用Javascript来尝试提出一个跨浏览器的解决方案

基本上，当加载页面时，函数会查找容器的

offsetHeight

，减去标题的

offsetHeight

，并将边栏的style.height和content

div

设置为与结果相等

由于IE6中的无限循环错误，我必须实现一个函数来检查窗口是否实际调整了大小

它在FF中工作得很好（实际上，我在FF中没有任何Javascript就获得了我想要的效果，但我离题了…），但在IE6中，内容

div

在每次调整大小事件中实际上都会增加大小。它的高度增加了整整6个像素

编辑：我想补充的是，当增加窗口大小时，代码实际上可以正常工作，但当减小窗口大小时则不行

以下是小提琴的链接：

Javascript：

var setup = {
viewWidth: undefined,
viewHeight: undefined,
newViewWidth: undefined,
newViewHeight: undefined,
resizeTimeout: undefined,

findView: function() {
    if (typeof window.innerWidth != 'undefined') {
        viewWidth = window.innerWidth;
        viewHeight = window.innerHeight;
    }

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewWidth = document.documentElement.clientWidth;
        viewHeight = document.documentElement.clientHeight;
    }
},

windowCheck: function() {

    setup.findView();

    if (setup.viewWidth != setup.newViewWidth || setup.viewHeight != setup.newViewHeight) {
        setup.resizeTimeout = window.setTimeout(setup.onResize, 10);
    };


},

 onResize: function() {
    var head = document.getElementById("viewportheader").offsetHeight;
    var content = document.getElementById("container").offsetHeight;



    document.getElementById("listing").style.height = content - head + 'px';
    document.getElementById("viewport").style.height = content - head + 'px';

    document.getElementById("tester2").innerHTML = content;
    document.getElementById("tester").innerHTML = content - head;


    setup.newViewWidth = document.documentElement.clientWidth;;
    setup.newViewHeight = document.documentElement.clientHeight;

    window.clearTimeout(setup.resizeTimeout);
 }
};


function start() {
    setup.onResize();
    window.onresize = resize;

}

function resize() {
    setup.windowCheck();
}

window.onload = start;

---

编辑：这里有一个更简单的解决方案

对于要计算高度的元素（

#viewportheader，#container

），只需将其溢出属性设置为隐藏（

溢出：隐藏；

）。这将使它们忽略其子对象的大小，而只调整到其父对象的宽度/高度

--替代解决方案--

实际上，在测试之后，有几个问题加在一起，只有一个问题在IE6中产生了这个问题

---

当一个div的宽度或高度达到100%时，它也会考虑它的子对象。例如，如果文档的宽度是以100px计算的，而div的宽度设置为100%，那么div的计算宽度也是100px。但是，如果您也将其子项的大小调整为100px，则将文档的大小调整为80px，即使div的宽度设置为100%，它仍将保持为100px，而不会调整为80px。这是因为它的子对象大于80px，因此div将调整大小以适合它的子对象。

编辑：这里有一个更简单的解决方案

对于要计算高度的元素（

#viewportheader，#container

），只需将其溢出属性设置为隐藏（

溢出：隐藏；

）。这将使它们忽略其子对象的大小，而只调整到其父对象的宽度/高度

--替代解决方案--

实际上，在测试之后，有几个问题加在一起，只有一个问题在IE6中产生了这个问题

---

当一个div的宽度或高度达到100%时，它也会考虑它的子对象。例如，如果文档的宽度是以100px计算的，而div的宽度设置为100%，那么div的计算宽度也是100px。但是，如果您也将其子项的大小调整为100px，则将文档的大小调整为80px，即使div的宽度设置为100%，它仍将保持为100px，而不会调整为80px。这是因为它的子对象大于80px，因此div将调整大小以适合它的子对象。

您无需将

viewWidth

、

viewHeight

以及所有其他设置为未定义。他们会自动设置为该值。如果确实需要默认值（本例中不需要），请使用

null

。无需将

viewWidth

、

viewHeight

，以及所有其他值设置为未定义。他们会自动设置为该值。如果确实需要默认值（本例中不需要），请使用

null

。重置高度有效！因为我浪费了很多时间试图让原始代码正常工作，所以我对它的工作原理非常感兴趣。当我将高度设置为“content-head”时，它应该覆盖以前的任何值。不是吗？你改变了替代方案了吗？我不知道你用Javascript删除高度重置是什么意思。我只是说你可以撤销我最初在第一个解决方案中发布的更改：）重置高度有效！因为我浪费了很多时间试图让原始代码正常工作，所以我对它的工作原理非常感兴趣。当我将高度设置为“content-head”时，它应该覆盖以前的任何值。不是吗？你改变了替代方案了吗？我不知道你用Javascript删除高度重置是什么意思。我只是说你可以撤销我最初在第一个解决方案中发布的更改：）

onResize: function() {
    // You need to reset the heights before you do your calculations
    document.getElementById("listing").style.height = '0px';
    document.getElementById("viewport").style.height = '0px';

    var head = document.getElementById("viewportheader").offsetHeight;
    var content = document.getElementById("container").offsetHeight;


    document.getElementById("listing").style.height = content - head + 'px';
    document.getElementById("viewport").style.height = content - head + 'px';

    document.getElementById("tester2").innerHTML = content;
    document.getElementById("tester").innerHTML = content - head;

    // IE uses offsetWidth/Height, you'll need to check for this
    setup.newViewWidth = document.documentElement.offsetWidth;
    setup.newViewHeight = document.documentElement.offsetHeight;

    window.clearTimeout(setup.resizeTimeout);
}