iframe 100％高度导致垂直滚动条

Question

我正在尝试在屏幕顶部布置一个具有固定高度标题的设计，然后在下面占用剩余空间的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设置为transitional，它可以在safari / chrome中运行，但是与IE8的严格情况下的问题相同。 如果我使用HTML5 doctype，它在所有浏览器中都有与严格相同的问题。

最后，如果我在任何这些情况下删除iframe，一切都很好。

有人有想法么？

Answer 1

添加CSS主体{overflow-y：hidden;}

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

iframe 100％高度导致垂直滚动条

问题描述

1 个解决方案

解决方案1
5 2010-05-25 06:47:24

iframe 100％高度导致垂直滚动条

问题描述

1 个解决方案

解决方案1 5 2010-05-25 06:47:24

解决方案1
5 2010-05-25 06:47:24