Question

所以我有一张桌子上有一些twitch.tv小部件。我希望桌子保持固定在100％宽度和视口中的高度，因此内部元素可以调整大小以适应用户拥有的任何窗口大小。我希望没有滚动。

问题在于，当用户调整窗口大小时，高度最终会超过100％并且不缩小以适应（强制它们进入f5或滚动）。到底是怎么回事？我该如何解决这个问题？

<!doctype html>
<html>
<html style="height: 99%;">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body style="height: 99%;">

<table width="100%" style="height: 99%;" border="1">
  <tbody>
    <tr>
      <td rowspan="2" width="350"><iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=twitchraidstwitch&amp;popout_chat=true" height="99%" width="350"></iframe></td>
      <td><object type="application/x-shockwave-flash" height="99%" width="100%" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=internationalspacepimps" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=twitchraidstwitch&auto_play=true&start_volume=25" /></object></td>
      <td rowspan="2" width="350"><iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=monstercat&amp;popout_chat=true" height="99%" width="350"></iframe></td>
    </tr>
    <tr>
      <td><object type="application/x-shockwave-flash" height="99%" width="100%" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=internationalspacepimps" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=twitchraidstwitch&auto_play=true&start_volume=25" /></object></td>
    </tr>
  </tbody>
</table>
</body>
</html>

HTML表格在窗口重新调整大小时扩展超过100％的高度

0 个答案: