My <object> ignores its parent's height_问答_开发者

开发者 https://www.devze.com 2023-01-12 22:48 出处：网络

I have a flash object in my page that i want to make as large as possible. The page is pretty much bare, except for one thing: abar at the top.

相关专题：javascript

I have a flash object in my page that i want to make as large as possible. The page is pretty much bare, except for one thing: a bar at the top.

Html:

<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
// setting flashvars, params, attributes
//...
// adding swf
swfobject.embedSWF("myflash.swf", "myAlternativeContent", "100%", "100%", "9.0.114", "swfobject/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id='banner'>
this is random text, could be an image, could be a menu, with a certain random height i cannot predict
</div>
<div>
    <div id="myAlternativeContent">
    </div开发者_开发技巧>
</div>
</body>

When i view this page in IE 8, the flash object has indeed a height of 100%, but it is of the browser window, not of the parent div. That means i get a vertical scrollbar and if i scroll it, the flash fills the entire window. This is not what i want. I want the page to have no scrollbar, and the flash to have the height of the rest of the window.

I tried this solution with javascript (after the closing div):

<script language="javascript" type="text/javascript">
function getWindowHeight() {
  // by http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  var myHeight = 0;
  if( typeof( window.innerWidth ) == "number" ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in "standards compliant mode"
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}
var otherheight = document.getElementById("banner").offsetHeight;
document.getElementById("myAlternativeContent").parentNode.style.height = (getWindowHeight() - otherheight) + "px";
</script>

But then i see that even though the height of the parent div gets set to the correct amount, the flash object completely ignores it and does not redraw or whatever, and just keeps its merry height.

How can i accomplish what i want to do? No scroll bar, a banner thing on top, and then the rest of the window filled with my flash object?

Modified answer: Try modifying the call to swfobject.embedSWF so that the height you give it is calculated correctly instead of being a %age - ie set it to: