iframe 100% 高度导致垂直滚动条答案

【问题标题】：iframe 100% height causing vertical scrollbariframe 100% 高度导致垂直滚动条
【发布时间】：2011-02-23 13:17:10
【问题描述】：

我正在尝试布局在屏幕顶部具有固定高度标题的设计，然后在下方使用 iframe 占用剩余空间。我想出的解决方案如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
  </head>
  <body>
    <div style="height:70px;background-color:blue;"></div>
    <div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
      <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

本质上，我在标题下方创建一个绝对定位的 div 并调整其大小以占用其余空间，然后将完整大小的 iframe 放在那里。

我遇到的问题是，如果您在每个浏览器中使用 XHTML Strict 完全按照如下所示粘贴代码（使用 chrome/safari/ie8 进行测试），您将看到一个带有几个像素的垂直滚动条div 下方的空白区域。

做了一些实验，我发现如果我完全删除 doctype，它可以在 safari/chrome 中工作，但 IE 变得更糟，将 iframe 高度设置为 300px 左右。如果我将 doctype 设置为过渡，它可以在 safari/chrome 中工作，但与 IE8 的严格情况下的问题相同。如果我使用 HTML5 doctype，它在所有浏览器中都会遇到与 strict 相同的问题。

最后，如果我在其中任何一种情况下删除 iframe，一切都布置得很好。

有人有什么想法吗？

【问题讨论】：

标签： html iframe doctype

【解决方案1】：

添加 CSS body { overflow-y:hidden;}

移除垂直滚动。如果 iFrame 内容超出页面大小，则 iframe 将获得滚动条而不是页面。

【讨论】：

谢谢，成功了！只是出于好奇，知道为什么会出现额外的内容吗？从概念上讲，似乎所有内容都应该适合页面。
太棒了。谢谢你。你在我烦人的冗长搜索中给出了缺失的一块拼图，试图让它发挥作用。不幸的是，在 IE 6 和 7（不了解 IE 8）中，我仍然不得不使用仅 IE 样式：height:expression((document.body.offsetHeight - 25) + 'px');。但我没关系。 Firefox 和其他浏览器会忽略这种风格。幸运的是，我的标题栏是固定大小的。如果没有，我将不得不使用document.body.offsetHeight - document.getElementById('headerbar').offsetHeight 或类似的。
是的，但是您会遇到问题，当您突出显示文本时，页面会上下滚动。烦人。
我不同意这个答案，因为当 iframe 确实超过了包装 div 时，您可能仍然需要滚动条。需要去除滚动条过早的原因