如何让iframe高度适配屏幕？设置100%后高度仍过小

问题根源：设置height:100%的元素，高度计算依赖父元素的明确高度值。默认情况下html和body的高度由内容撑开，未设置100%高度，导致iframe的height:100%无参考基准，最终高度极小。

解决步骤：

• 给html和body设置100%高度，同时清除默认内外边距，避免页面出现滚动条或间隙
• 保持iframe宽高100%设置，添加display:block消除inline元素默认间距

修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>RPiCODE</title>
    <meta charset="UTF-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
      }
    </style>
  </head>
  <body>
    <iframe src="https://example.com" class="iframe" title="Testing"></iframe>
  </body>
</html>

该方案无需固定像素值，能自适应不同浏览器和设备的屏幕尺寸，完全满足跨端适配需求。

内容的提问来源于stack exchange，提问作者RPiCPU