Question

我正在尝试做一些似乎应该简单的事情，但事实并非如此。实际应用比这里的样本更复杂，但这再现了我正在努力的东西。我使用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>

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

从计时器再次调用大小。非常明显的眨眼。
将正文样式设置为＆＃34;溢出：隐藏＆＃34;。

我从调试中确定的是$（document）.width（）大于$（window）.width（），因此分配了滚动条。但是resize函数会更改内容大小以更正此内容，但滚动条不会消失，直到稍后更新所需的文档宽度并进行另一次调整大小时。

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

如何在调整大小时消除额外的填充

0 个答案: