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

Using Javascript to set DIV height to 100% causing cross-browser problems

本文关键字：浏览器 问题 100% Javascript DIV 高度 设置 使用      更新时间：2023-09-26

我需要一个侧边栏div和一个内容div，其高度始终是容器高度的100%，无论内容如何。当窗口大小改变时，容器大小也会改变。我不能用背景来伪造效果。我必须针对IE6进行设计，并决定使用Javascript来尝试并提出一个跨浏览器的解决方案。

基本上，当页面加载时，一个函数找到容器的offsetHeight，减去标题的offsetHeight，并设置样式。侧边栏的高度和内容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)，只需将其溢出属性设置为隐藏(overflow: hidden;)。这将使它们忽略它的子元素的大小，只调整到父元素的宽度/高度。

—备选方案—

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);
}

有几个问题加在一起，实际上，经过测试，你只有一个问题在IE6中造成这个问题。

当一个div的宽度或高度为100%时，它也会考虑它的子元素。例如，如果文档的宽度计算为100px,div的宽度设置为100%，那么div的计算宽度也为100px。但是如果你也将它的子元素的大小调整为100px，然后将文档的大小调整为80px，即使div的宽度设置为100%，它仍然会保持为100px，而不是调整为80px。这是因为它的子元素大于80px，因此div会调整大小以适合它的子元素

相关文章：