0

考虑以下简单的 html 页面：

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:200px;height:200px;position:absolute;bottom:0px">
                This is the DW box
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

正如您所看到的，通过使用jQueryI resize divroot以适应窗口。如果您尝试代码（至少在 Chrome 上，我的版本是 Chrome 23）会发生什么，root它将不断水平地适应浏览器窗口。垂直拟合也正确执行，但仅在增加浏览器的窗口高度时。

如果您尝试垂直扩展浏览器窗口，没问题。但是，扩展后，如果你尝试减少浏览器窗口的垂直占用，root将无法适应它！

演示

你可以在这里看到我的窗户。

在此处输入图像描述

这里我展开，没有错，灰色框（根）展开。

在此处输入图像描述

不幸的是，快照工具没有显示滚动条，但很明显，当减小垂直尺寸时，灰色框不适合......

在此处输入图像描述

为什么是这样？如何解决这个问题？谢谢

附言

您会看到一个名为 的 div graph。该 div 应该保留在浏览器窗口的下部。

4

4 回答 4

2

这里的重点是 jQuery(window).height() == document.documentElement.clientHeight（对于 jQuery 1.8+），它在不同的浏览器中表现不同。

$(document).height() 返回 scrollHeight、offsetHeight 和 clientHeight 之间的最高值——但浏览器之间的结果却截然不同。

所以它实际上比使用 CSS更少跨浏览器。这就是你应该做的：

html,body { height:100%; }
#root { min-height:100%; position:relative; }
#graph { position:absolute; bottom:0; }
于 2013-01-02T10:28:27.080 回答
1

似乎只使用CSS是可能的，即 height: 100%

在此处查看浏览器兼容性高度 css 属性

工作小提琴

于 2013-01-02T09:49:06.407 回答
1

为了make it cross browser这个也you have to use css为了html and body。

在我的小提琴中，我对 CSS 进行了更改：

html,body{height:100%;}

然后jquery中的小变化：

$(window).resize(function() {
    $('#root').width('100%'); // <---100% width
    $('#root').height('100%'); //<---100% height
});

这样你就不会在扩大或缩小窗口时出现故障。

查看更新的小提琴：http: //jsfiddle.net/D6YUr/2/

于 2013-01-02T09:42:10.643 回答
0

正如我已经在评论中写的那样，我只看到一个问题。零宽度空间 ( &#8203;)。那是一个不可见的 Unicode 字符，用于标记可以分隔单词的位置（在行尾）。我真的不知道它是如何进入你的代码的。所以我只是重新输入了你的代码（我知道删除它的唯一解决方案）结果如下：

<doctype>
<html>
    <head>
        <title>This is my page</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>

    <body style="padding:0px;margin:0px">
        <div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
            <div id="graph" style="background-color:#00ff00;width:50px;height:20px;position:absolute;bottom:0px">
            </div>
        </div>

        <script type="text/javascript">
            $(window).resize(function(){
                $('#root').width($(window).width());
                $('#root').height($(window).height());
            });
        </script>
    </body>
</html>

它看起来完全一样，但零宽度空间被删除了。

于 2013-01-02T10:13:13.607 回答