1

DIV をフルスクリーンにしたい Rails Web ページがあるので、html,body の高さを 100% にしました。しかし、Chromeブラウザから取得したものは100％ではなく、元のページが大きいためautoでしたが、このテストページは小さいため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 がなぜそうなのか、それをオフにする方法を知りたいと思っています。または何か、しかしそれはうまくいきません。

ところで、私はMac用のChrome 29.0.1547.76、Rails 4.0.0を使用しています。

入力があれば感謝します。

私の情報も十分でない場合はお知らせください。

ありがとう！

4

0 に答える 0