1

我有一个 Rails 网页，我想让 DIV 全屏显示，所以我将 html,body height 设置为 100%。但是我从 Chrome 浏览器得到的不是 100%，它在原始页面中是自动的，因为它很大，在这个测试页面中它是 484px，因为它很小。

这是我从 Chrome 获得的代码：

<html style="height: 484px;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Test</title>
    <style type="text/css" media="screen">
    body, html {
        height: 100%;
    }
    </style>

    <link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css">
    <script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script>
    <style type="text/css"></style>
    <script>window["_GOOG_TRANS_EXT_VER"] = "1";</script>
    </head>
    <body screen_capture_injected="true">
        <div class="title">
            <div>
                <a href="/library">Library</a>
            </div>
        </div>

    <div id="GOOGLE_INPUT_CHEXT_FLAG" style="display: none;" input="" input_stat="{}"></div><div style="clear: both;"></div><iframe frameborder="0" scrolling="no" style="background-color: transparent; border: 0px; box-sizing: content-box; width: 152px; height: 29px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; z-index: 2147483643; margin: 0px; position: fixed; left: 1234px; top: 405px; display: none;"></iframe><iframe frameborder="0" scrolling="no" style="background-color: transparent; border: 0px; display: none; box-sizing: content-box; width: 427px; height: 299px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px 0px; z-index: 2147483640; margin: 0px; position: fixed;"></iframe><iframe frameborder="0" scrolling="no" style="background-color: transparent; border: 0px; display: none; box-sizing: content-box; width: 67px; height: 66px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px 0px; z-index: 2147483644; margin: 0px; position: absolute;"></iframe>
    </body>
</html>

看到“高度：484px;”了吗？这是由 Chrome 添加的。我没有从 Safari 或 Firefox 中看到它。并且还添加了几个它的标签/样式。我敢打赌这与身高数有关。

但是同样的内容，我对静态html没有任何问题：

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css" media="screen">
    body, html {
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="title">
        <div>
            <a href="/library">Library</a>
        </div>
    </div>
</body>
</html>

所以，我可以在 100% 高度之后用 !important 解决这个问题，但我仍然想知道为什么 Chrome 会这样以及如何关闭它，希望有一些配置，例如：-webkit-appearance: none; 或其他东西，但这不起作用。

顺便说一句，我在 Mac 上使用 Chrome 29.0.1547.76，Rails 4.0.0。

欣赏是否有任何输入。

如果我的信息还不够，请告诉我。

谢谢！

4

0 回答 0