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 body {overflow-y：hidden;}

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

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

1 个答案: