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

Question

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

我正在尝试在屏幕顶部布置一个具有固定高度标题的设计,然后在下面占用剩余空间的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>

Run Code Online (Sandbox Code Playgroud)

基本上,我在标题下创建了一个绝对定位的div,并调整它以占据剩余的空间,然后将全尺寸的iframe放在那里.

我遇到的问题是,如果你在每个浏览器中使用XHTML Strict完全按照下面的方式粘贴代码(使用chrome/safari/ie8测试),你会看到一个带有几个像素的空白区域的垂直滚动条低于div.

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

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

有人有主意吗？

Answer 1

Dav*_*veo 5

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

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

归档时间：	15 年，6 月前
查看次数：	6590 次
最近记录：	9 年，11 月前