-1

Trying to embed a blog into our html website with an iFrame #:

<h1 class="title">All the latest...</h1>
</br>
</div>
    </div>
        </div>
        <iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
        <p>Your browser does not support iframes.</p>
        </iframe>

I've tried changing height to 100%, auto and even numerous fixed widths, however the height of the iframe stays exactly the same! Any help?

Thanks in advance,

Aidan

Aidan
  • 1
  • 1
  • possible duplicate of [how to make a html iframe 100% width and height?](http://stackoverflow.com/questions/3306124/how-to-make-a-html-iframe-100-width-and-height) – emerson.marini Jul 11 '14 at 15:11

2 Answers2

0

If you're using a percentage, then the containing element must have a height or the iFrame won't know what to base the percentage on. If you give body 100% height and then give the iFrame 100% height, it will fill the entire height of the window.

Additionally, I would advise against using inline CSS, instead put your CSS rules into a CSS file.

HTML:

<body>
<iframe src ="http://inspireacademy.tumblr.com">
    <p>Your browser does not support iframes.</p>
</iframe>
</body>

CSS:

body {
    height:100%;
}
iframe {
    height:100%;
    width:100%;
}

JSFiddle

APAD1
  • 13,509
  • 8
  • 43
  • 72
0

You will have to set the height of the containing div. The height auto uses the container the element is in to set the height. Height only works as a percentage when it is in a container.

<h1 class="title">All the latest...</h1></br>
</div>
    </div>
        </div>
        <div style="height:400px;">
            <iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
                <p>Your browser does not support iframes.</p>
            </iframe>

It will then scale to the container.

Chuck Wojciuk
  • 16