为什么在减小垂直尺寸时div调整大小不适合浏览器窗口?

时间:2013-01-02 09:26:52

标签: jquery html css resize

考虑以下简单的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>

正如您使用jQuery所看到的那样,我调整了div root的大小以适应窗口。如果您尝试使用该代码(至少在Chrome上,我的版本是Chrome 23),那么root会不断地横向调整浏览器窗口。垂直拟合也正确执行,但仅在增加浏览器的窗口高度时才会执行。

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

演示

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

enter image description here

我在这里扩展,没有错,灰盒子(根)扩展。

enter image description here

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

enter image description here

这是为什么?如何解决这个问题?三江源

PS

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

4 个答案:

答案 0 :(得分: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; }

答案 1 :(得分:1)

make it cross browseryou 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/

答案 2 :(得分:1)

似乎只能使用CSS,即height: 100%

点击这里查看身高css属性的Browser Compatibility

<强> Working Fiddle

答案 3 :(得分: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>

它看起来完全相同,但零宽度空间被删除。