title: How can I resize an iframe element to change with the screen size?
body: <p>I have an <code>iframe</code> element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins). </p>
  
  <p>Copying and pasting the <code>iframe</code> code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the <code>iframe</code> dimensions don't adjust for the different screen size. </p>
  
  <p>Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the <code>iframe</code> dimensions to be dynamic? </p>
  
  <p>Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.  </p>
  
  <p><strong>Edited to add:</strong>
  Following the first two responses, I inserted the HTML line</p>
  
  <pre><code>&lt;iframe style="width:100%; height:500px;overflow:auto;"&gt;
  </code></pre>
  
  <p>and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:</p>
  
  <p><a href="https://i.stack.imgur.com/RmRUi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RmRUi.png" alt="enter image description here"></a></p>
  
  <p>Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):</p>
  
  <pre><code>&lt;center&gt;
      &lt;div&gt;
          &lt;iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>For what it's worth, I've tried to delete the <code>width="320" height="240"</code> snippet at the end of the <code>&lt;iframe&gt;</code> tag, but as I click "update" in the HTML editor, the snippet reappears.</p>