0

I was looking into using a frameset on my otherwise XHTML 1.0 Strict site, but I've noticed that with HTML5 the frameset feature is obsolete, and an iframe should be used instead.

I need to load a foreign site within my site, with my site only occupying the very top portion of the screen (and it'd be nice if it didn't impede scrolling, either, e.g. looked as if my top portion of my site was actually an iframe within the foreign site).

How do I do this with HTML5 iframe? Can I set the height of the iframe to the full-size of the document that's loaded within the iframe, and the width to full screen width? My own site will only be a small one-line menu at the top; the whole screen has to be dedicated to the iframe otherwise.

No JavaScript, must be HTML5-only (possibly with some minor CSS, but nothing major, since it has to work in browsers like lynx / links).

cnst
  • 25,870
  • 6
  • 90
  • 122

1 Answers1

0

Use a combination of position of fixed and absolute.

Example:

<div id="myHeader">My site portion</div>
<div id="myWrapper"><iframe id="myIframe" src="data:text/html;charset=utf-8,<div style='position:absolute;height:100%;width:100%;background-color:red;'>other Site</div>"></iframe></div>


body {
    margin: 0 0 0 0;
}

#myHeader {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100%;
}

#myWrapper {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}

#myIframe {
    height: 100%;
    width: 100%;
}
dtech
  • 13,741
  • 11
  • 48
  • 73
  • this seems to leave me with three scrolling bars (one vertical, two horizontal), instead of just one; I want only one scrolling bar, probably the main one, and I want my own content to scroll out of view, to make more room for the content referenced in the iframe – cnst May 16 '13 at 21:15
  • The scrollbars are a matter of tuning margins and overflow. Scrolling out of view can be done by changing `fixed` to `absolute`. Giving the iframe full height will require a little bit of JS though (http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript) – dtech May 17 '13 at 06:52
  • Correction: this is actually impossible without control of the child page because of Javascript cross-domain issues. – dtech May 17 '13 at 07:11