窗口缩小时IE div不会相应缩小答案

【问题标题】：IE div won't shrink correspondingly when window is shrinked in size窗口缩小时IE div不会相应缩小
【发布时间】：2011-06-28 20:53:56
【问题描述】：

我有一个高度由 javascript 控制的 div，它应该会在调整窗口大小时改变 div 的大小。现在在放大窗口时可以正常工作，但在缩小窗口时不起作用。可能是什么原因？我有下面的代码

    <script type="text/javascript">
        function window_resize() {
            var height = 0;
            var body = window.document.body;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (body.parentElement.clientHeight) {
                height = body.parentElement.clientHeight;
            } else if (body && body.clientHeight) {
                height = body.clientHeight;
            }

            var element = document.getElementById('test');
            element.style.height = height*80/100 + 'px';
        }

        Sys.Application.add_init(function (sender, args) {
            $addHandler(window, 'resize', window_resize);
            $addHandler(window, 'onload', window_resize);
            document.body.onresize = window_resize;
            document.body.onload = window_resize;
        });

    </script>

    <div id="test" style="width:1000px;padding:0px;margin:0px;">
        <spc:Explorer ID="explorer" runat="server"></spc:Explorer>
    </div>

【问题讨论】：

你在这里使用的是 javascript 库吗？
是的，在 div 中有一个控件（id of 'explorer'）。本质上，控件来自 extjs。

标签： javascript internet-explorer html extjs resize

【解决方案1】：

我猜当你缩小窗口时 div 太小了。可能的原因是减小窗口大小会使滚动条出现（即使它们没有显示），因此窗口大小的计算是在滚动条内。

一种解决方案是将body.style.display = 'none' 应用于正文，获取窗口大小，然后执行body.style.display = ''。

【讨论】：