Question

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

基本上，当加载页面时，函数会找到容器的offsetHeight，减去标题的offsetHeight，并设置侧边栏的样式。高度和内容{{1}等于结果。

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

它在FF中工作正常（实际上，我在FF中没有任何Javascript就得到了我想要的效果，但是我离题了......），但是在IE6中，内容div实际上增加了每个resize事件的大小。它的高度增加了6个像素。

编辑：我想补充说，增加窗口大小时代码实际上工作正常，但是在减小窗口大小时却没有。

以下是小提琴的链接：Here

Javascript：

div

Answer 1

编辑：这是一个更简单的解决方案！

使用从（#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会调整大小以适应它的孩子。

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

1 个答案: