title: iFrame & Div ID not working as expected for iOS iFrame fix
body: <p>iOS automatically resizes scrollable iFrames to the full height of the iFrame's content.</p>
  
  <p>I've fixed it using a mixture of in-line styling &amp; style in the head applied to a div and the iFrame, however when trying to move the styling, all to the head and assigning ID's to the Div &amp; iFrame, the fix doesn't work.</p>
  
  <p>This works:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              iframe {
                  height: 600px !important;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="overflow: auto; -webkit-overflow-scrolling:touch;"&gt;&lt;iframe src="//www.google.com/" width="100%" height="600px"&gt;&lt;/iframe&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This doesn't work:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              #iOSiFrameFix {
                  height: 600px !important;
                  width: 100% !important;
              }
  
              #iOSDivFix {
                  overflow: auto !important;
                  -webkit-overflow-scrolling:touch !important;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="iOSDivFix"&gt;&lt;iframe id="iOSiFrameFix" src="//www.google.com/"&gt;&lt;/iframe&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am not sure what I am doing wrong here. For some reason the second set of code doesn't apply the fix.</p>