Div标记应自动拉伸，以便背景图像和div标记的高度相应地更改为SWF内容。并且它们不应该落在位于它们下面的div标签之后，例如页脚。
在this website上可以看到我想要实现的内容，SWF游戏加载了。
我是网页设计的初学者，被要求实现这一点，所以我很抱歉，如果这实际上是一个愚蠢的问题并且很容易完成，我就无法找到任何教程或解释它是如何完成的。
这是页面的CSS :(有问题的div标签是#game）
* {
margin:0;
padding:0;
}
body {
height: 100%;
background-image: url(_assets/gray_bcg.png);
background-repeat: repeat;
background-x-position: center;
background-y-position: top;
background-attachment: fixed;
background-color: #ccc;
margin: 0;
}
#container {
display:block;
width:100%;
}
#wrapper {
height:auto!important;
min-height:100%;
position:relative;
width:918px;
background-image:none;
background-repeat:repeat-y;
margin:0 auto;
padding:0;
}
#content {
width: 918px;
}
#header {
display: block;
height: 368px;
width: 914px;
cursor: pointer;
background-image: url(_assets/1header.png);
background-repeat: no-repeat;
margin: 0 auto;
}
#headerSides {
display: block;
width: 100%;
height: 734px;
z-index: -1;
background-image: url(_assets/1sidebars.png);
background-repeat: no-repeat;
background-position: center top;
}
#headerLeft {
float: left;
position: absolute;
width: 916px;
background-image: none;
margin: 200px 0 0;
left: 0px;
}
#nav {
float:left;
width:584px;
margin:0;
padding:0;
}
#headerSides #wrapper #header #headerLeft #search {
height:59px;
width:306px;
float:right;
margin:-58px 0 0;
}
#add1 {
background-image: url(_assets/recatangle_ad_container.png);
float: left;
height: 105px;
width: 746px;
margin: 0 0 10px;
}
#logo {
background-image: url(_assets/logo_container.png);
float: right;
height: 106px;
width: 166px;
}
.centered {
display:block;
height:65px;
width:122px;
margin:15% auto 5%;
}
#game {
background-image: url(_assets/gcont917x605.png);
height: auto;
width: 917px;
margin-top: 110px;
padding-top: 25px;
padding-left: 160px;
background-repeat: no-repeat;
}
#footer {
background-image: url(_assets/footer.png);
background-repeat: no-repeat;
width: 917px;
clear: both;
height: 300px;
float: left;
}
这是html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="games.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="headerSides">
<div id="wrapper">
<div id="header">
<div id="headerLeft">
<div id="navbar">
<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','_assets/_menu/n_home_over.png',1)">
<img src="_assets/_menu/n_home.png" alt="Home" width="117" height="60" id="Home" />
</a>
<a href="games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('games','','_assets/_menu/n_games_over.png',1)">
<img src="_assets/_menu/n_games.png" alt="Games" width="117" height="60" id="games" />
</a>
<a href="blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','_assets/_menu/n_blog_over.png',1)">
<img src="_assets/_menu/n_blog.png" alt="Blog" width="117" height="60" id="blog" />
</a>
<a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forum','','_assets/_menu/n_forum_over.png',1)">
<img src="_assets/_menu/n_forum.png" alt="Forum" width="117" height="60" id="forum" />
</a>
<a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','_assets/_menu/n_about_over.png',1)">
<img src="_assets/_menu/n_about.png" alt="About" width="117" height="60" id="about" />
</a>
</div>
<!-- ends navbar -->
<div id="search">
<img src="_assets/search_bt.png" width="306" height="59" alt="search" />
</div>
<!-- ends search -->
<div id="add1">
<img src="_adds/728x90.jpg" alt="add1" width="726" height="88" align="right" />
</div>
<!-- ends add1 -->
<div id="logo">
<img src="_assets/efLogo.png" width="122" height="65" alt="logo" class="centered" />
</div>
<!-- ends logo -->
<div id="content">
<div id="game">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400" align="middle" id="FlashID" title="epic boss fighter">
<param name="movie" value="_games/EpicBossFighter.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="_games/EpicBossFighter.swf" type="application/x-shockwave-flash" width="600" height="400" align="middle">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" />
</a>
</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- ends game -->
<div id="footer"></div>
</div>
<!-- ends content -->
</div>
<!-- ends headerleft -->
</div>
<!-- ends heADER -->
</div>
<!-- ends wrapper -->
</div>
<!-- ends headerSides -->
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>