CSS rule resizes iframe width but not height

Question

I have an index.html markup as follows:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" href="Styles/main.css">
    </head>
    <body>
      <header>...</header>
      <iframe id="pagecontent" src="content.html"></iframe>
      <footer>...</footer>
    </body>
</html>

To apply styles, I use main.css whose content is as follows:

 #pagecontent {
    border: none;
    height: 100%;
    width: 100%;
}

The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.

Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?

iframes by default are `inline` so try `line-height` instead or use `display: block;` Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly. — zer00ne, Apr 06 '16 at 09:27
Neither `line-height` nor `display: block;` help. The result is the same — NeoSer, Apr 06 '16 at 09:31
The parent element needs to have a defined height otherwise `height: 100%` will not work. — Turnip, Apr 06 '16 at 09:32
According to the post, when using display: block rule, the corresponding element should behave like a block element. Why do you need another div then? — NeoSer, Apr 06 '16 at 10:42
Block elements height by default would be `auto` and that will rely on content. Unfortunately, content is treated differently in [replaced elements](http://stackoverflow.com/a/8018354/2813224) which are img, video, iframe, etc. which will override normal CSS conventions. — zer00ne, Apr 07 '16 at 02:15

score 0 · Answer 1 · answered Apr 06 '16 at 09:33

You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.

So you have to give height in px here

#pagecontent {
    border: none;
    height: 400px;
    width: 100%;
}

working example : https://jsfiddle.net/uxq4pzc1/

score 0 · Answer 2 · edited May 23 '17 at 12:07

iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.

Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.

See this post for details

#pagecontent {
  border: none;
  height: 100%;
  width: 100%;
  display: block;
}
.box {
  height: 20em;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>

<body>
  <header>...</header>
  <div class="box">
    <iframe id="pagecontent" src="http://example.com"></iframe>
  </div>
  <footer>...</footer>
</body>

</html>

I guess this is the same as I would fix the height of the iframe directly. Regarding 100%, well, the width seems to be computed as 100% of width of the browser window. Why does not it work for the height then? — NeoSer, Apr 06 '16 at 09:38
It's an inline element but if you want it to behave like a div (like normal) use `display: block` like in this demo. Or `display: inline-block` if you want it to sit side-by-side with other elements. — zer00ne, Apr 06 '16 at 09:39

score 0 · Answer 3 · answered Apr 06 '16 at 09:34

#pagecontent {
  border: none;
  height: 100vh;
  width: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>

<body>
  <header>...</header>
  <iframe id="pagecontent" src="content.html"></iframe>
  <footer>...</footer>
</body>

</html>

CSS rule resizes iframe width but not height

3 Answers3