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

碧玉

我有以下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上,可以进行轻微的滚动。

为什么发生滚动?

海达尔·C。

我明白了。因为您必须更改浏览器的CSS默认值才能在reset.cssnormalize.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默认样式表文件

Webkit默认样式表文件

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

包装高度为100%的滚动条

来自分类Dev

滚动条高度显示为 100%

来自分类Dev

内容高度100%产生垂直滚动条

来自分类Dev

CSS:为什么我的滚动条高度为100%?

来自分类Dev

内容宽度为100%,显示水平滚动条

来自分类Dev

水平滚动条,宽度为100%

来自分类Dev

WKInterfaceTable滚动条高度

来自分类Dev

在div中以100vh隐藏滚动条

来自分类Dev

WPF滚动条内容

来自分类Dev

滚动条无内容

来自分类Dev

位置绝对值和高度为100%的叠加div不随滚动条移动

来自分类Dev

在Flexbox中以100%的高度显示图像而无需滚动条

来自分类Dev

Chrome中水平滚动条的方向为RTL

来自分类Dev

在JEditorPane中添加滚动条,setLayout为null

来自分类Dev

如何在以窗口为中心的div中启用高度不固定的滚动条?

来自分类Dev

CSS-高度100%导致滚动条

来自分类Dev

CSS-高度100%导致滚动条

来自分类Dev

关于 100% 高度和滚动条 y 的布局问题

来自分类Dev

在没有托管页面滚动条的情况下打印iframe的内容

来自分类Dev

在没有托管页面滚动条的情况下打印iframe的内容

来自分类Dev

在Windows上将最小高度设置为滚动条?

来自分类Dev

将高度设置为100vh可以正常工作,但是在移动浏览器中却出现了滚动条

来自分类Dev

CSS 嵌套滚动条与动态内容以 100% 的宽度重叠

来自分类Dev

如何使用 CSS 在全屏 Web 应用程序的内容区域中添加滚动条,即 100% 的屏幕高度

来自分类Dev

身体高度滚动条

来自分类Dev

如何更改滚动条的拇指高度?

来自分类Dev

UIScrollView 滚动条的宽度和高度?

来自分类Dev

关于<iframe>中的滚动条

来自分类Dev

关于<iframe>中的滚动条

Related 相关文章

热门标签

归档