Html iframe 100%高度导致垂直滚动条_Html_Iframe_Doctype

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

html iframe

Html iframe 100%高度导致垂直滚动条,html,iframe,doctype,Html,Iframe,Doctype,我正在尝试布局一个设计，在屏幕顶部有一个固定高度的标题，然后在下面有一个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">

我正在尝试布局一个设计，在屏幕顶部有一个固定高度的标题，然后在下面有一个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，一切都会很好地安排好

有人有什么想法吗？

添加CSS主体{overflow-y:hidden；}

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

谢谢，这就成功了！只是出于好奇，你知道为什么会出现额外的内容吗？从概念上看，似乎所有内容都应该适合页面。太棒了。非常感谢。在我烦人的漫长搜索中，你给了我拼图中缺失的部分，试图让它工作。不幸的是，在IE6和IE7（不知道IE8）中，我仍然必须使用一种只支持IE的样式：

height:expression（（document.body.offsetHeight-25）+“px”）。但我同意。Firefox和其他浏览器忽略了这种风格。幸运的是，我的标题栏是固定大小的。如果没有，我就必须使用document.body.offsetHeight-document.getElementById（'headerbar'）.offsetHeight
或类似的方法。是的，但是当突出显示文本时，页面会上下滚动。恼人。我不同意这个答案，因为当iframe确实超过包装div时，您可能仍然需要滚动条。您需要消除导致滚动条过早出现的原因