Databases
StackOverflow2013
Postsdbo
POWhy does Chrome overwrite my css, changing html,body height from 100% to auto or number in Rails erb
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does Chrome overwrite my css, changing html,body height from 100% to auto or number in Rails erb
    text
    copied!<p>I have a rails web page where I wanted to make the DIVs full screen, so I made html,body height to 100%. But what I got from Chrome browser was not 100%, it was auto in the original page since it was large, it's 484px in this test page since it's small.</p> <p>Here is the code I got from Chrome:</p> <pre><code>&lt;html style="height: 484px;"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Test&lt;/title&gt; &lt;style type="text/css" media="screen"&gt; body, html { height: 100%; } &lt;/style&gt; &lt;link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"&gt; &lt;script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt;&lt;/style&gt; &lt;script&gt;window["_GOOG_TRANS_EXT_VER"] = "1";&lt;/script&gt; &lt;/head&gt; &lt;body screen_capture_injected="true"&gt; &lt;div class="title"&gt; &lt;div&gt; &lt;a href="/library"&gt;Library&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="GOOGLE_INPUT_CHEXT_FLAG" style="display: none;" input="" input_stat="{}"&gt;&lt;/div&gt;&lt;div style="clear: both;"&gt;&lt;/div&gt;&lt;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;"&gt;&lt;/iframe&gt;&lt;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;"&gt;&lt;/iframe&gt;&lt;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;"&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>See the "height: 484px;"? That was added by Chrome. I don't see it from Safari or Firefox. And there are also several its tags/styles added. I bet this has something to do with the height number.</p> <p>But with the same content, I don't have any problem with static html:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Test&lt;/title&gt; &lt;style type="text/css" media="screen"&gt; body, html { height: 100%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="title"&gt; &lt;div&gt; &lt;a href="/library"&gt;Library&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>So, I can fix this with !important after the 100% height but I still want to know why Chrome is that and how to turn it off, hopefully with some config like: -webkit-appearance: none; or something, but that doesn't work.</p> <p>Btw, I'm on Chrome 29.0.1547.76 for Mac, Rails 4.0.0.</p> <p>Appreciate if any input.</p> <p>Please let me know if my information is not enough also.</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload