Question

我有一个简单的html页面：

<html lang="en">
    <head>
        <style>
        html,body
        {
            min-width:100%;
            min-height:100%;
                    position:relative;
        }

        img
        {
           width:200px;
           height:200px;
        }
        </style>
    </head>

    <body>
        <img src="image.png" />
    </body>
</html>

现在当我加载页面时，'body'的宽度和高度必须至少是浏览器窗口的全宽和全高吗？但是当我使用像$('body').height()这样的jquery检索身体的高度时，它返回200px，这是身体内部图像的高度，而不是窗口的高度，实际上比图像高得多。

但是当我将html和body的位置更改为绝对而不是相对时，它的工作方式与我预期的一样。为什么会这样？

编辑：对不起。我打算问一下身高。我在必要时更新了这个问题。我知道$（window）.width（）和$（window）.height（）。这不是重点。我想知道为什么身体在相对定位时会失去它的高度。

Answer 1

当使用jquery时，对于位置相对文档将获得文档中整个元素的高度，并且因为您应用绝对位置，它将获得文档本身的高度，就好像它包含在100％全高中一样。对不起，我无法用言语说清楚。

但要解决这个问题，只需将overflow:hidden;添加到正文中，然后使用jquery进行检查，它显然会达到全高。

Answer 2

您需要使用$(document).width();来获取正文或HTML文档的总宽度。

Answer 3

使用

$('window').width();

或

$('document').width();

＆＃39;主体＆＃39;宽度和高度根据定位而变化

3 个答案: