CSS to make an iframe take the rest of the height of the page?
If I have something like this:
<p>Element<p>
<iframe src = "otherPage.html" style = "width:100%;height:100%">
</iframe>
The iframe runs off the page. For various reasons, I can't specify an absolute height. What is the proper CSS way to make an element use the remaining height of its container element?开发者_开发问答 A quick google search claimed this impossible, but certainly there's a workaround. The inner iframe here has a gradient, which due to IE's inability to display clear iframe backgrounds, must just take up the rest of the page.
Thoughts?
So many repeats of this question :)
You can achieve this using javascript:
This script was taken from Dynamic Drive and altered:
(just rememebr to specify
var iframeids = ["Whatever frame id's you want to auto-resize seperated by ,"]
<script type="text/javascript" language="javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids = ["contentFrame"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide = "no"
var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe = new Array()
for (i = 0; i < iframeids.length; i++) {
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide == "no") {
var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display = "block"
}
}
}
function resizeIframe(frameid) {
var currentfr = document.getElementById(frameid)
if (currentfr && !window.opera) {
currentfr.style.display = "block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
else if (currentfr.contentDocument && currentfr.contentDocument.documentElement.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.documentElement.offsetHeight + FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
else if (currentfr.Document && currentfr.Document.documentElement.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.documentElement.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt = (window.event) ? event : loadevt
var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url) {
if (document.getElementById)
document.getElementById(iframeid).src = url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload = resizeCaller
</script>
link text
精彩评论