1

我正在尝试做一些看起来应该很简单但事实并非如此的事情。实际应用程序比此处的示例更复杂，但这重现了我正在努力解决的问题。我的大部分开发都是用 IE9 进行的，但我已经在其他浏览器上进行了尝试，发现了同样的问题。

我有一个要根据浏览器窗口大小调整大小的 DIV。大多数情况下，代码都可以工作，除非用户缩小浏览器窗口，否则您最终会得到额外的填充，这些填充显然是为不需要的滚动条分配的（有时）。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Resize Test</title>
    <script src="/SharedLib/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function resize(e) {
            $("#sized-content").width($(window).width() - 10); // 2 x 5px border = 10
            $("#sized-content").height($(window).height() - 10);
        }
        $(document).ready(function () {
            $(window).resize(resize);
            resize();
        });
    </script>
</head>
<body style="margin: 0px;">
    <div id="sized-content" style="border: 5px solid red;"></div>
</body>
</html>

到目前为止，我发现了 2 个非常不受欢迎的修复：

  1. 再次调用 resize 关闭计时器。非常明显的眨眼。
  2. 将正文样式设置为“溢出：隐藏”。

我从调试中确定的是 $(document).width() 大于 $(window).width() 并且因此分配了滚动条。但是调整大小功能会更改内容大小以纠正此问题，但滚动条直到稍后更新所需的文档宽度并且发生另一个调整大小时才会消失。

在我看来，这个额外的滚动条填充应该能够在没有破解的情况下被消除。

4

0 回答 0