Question

我有以下index.html页面：

<html>
<head>
<style>    
    html, body {
        height:100%;
    }
</style>
</head>

<body style="height:100%;">
<div style="width:100%; height:100%;">
  <div id="theHead" style="height:10%; ">

  </div>
  <div id="theMain" style="height:80%;">

  </div>
  <div id="theBottom" style="height:10%;">
  </div>
</div>
</body>
</html>

这是iframe内部：

<iframe id="theIframe" src="index.html" width="800px" height="450px">
   Hello World...
</iframe>

我看到iframe上出现滚动条，允许轻微（非常小）滚动。

为什么会发生滚动？

Answer 1

我明白了..因为您必须更改浏览器的CSS默认值，请使用reset.css或normalize.css

示例删除边距：

index.html页面：

<html>
<head>
<style>    
    html, body {
        height:100%;
        margin:0px; //--> added this line
    }
</style>
</head>

<body style="height:100%;">
<div style="width:100%; height:100%;">
  <div id="theHead" style="height:10%; ">

  </div>
  <div id="theMain" style="height:80%;">

  </div>
  <div id="theBottom" style="height:10%;">
  </div>
</div>
</body>
</html>

Firefox default stylesheet file

Webkit default stylesheet file

Answer 2

而不是使用

<iframe id="theIframe" src="index.html" width="800px" height="450px">
   Hello World...
</iframe>

尝试使用

<iframe id="theIframe" src="index.html" width="800px" height="450px">Hello   World...</iframe>

并添加scrolling =＆＃34; no＆＃34;如果您不想在iframe上看到滚动条。

iframe中的滚动条 - 内容高度为100％

2 个答案: