iframe嵌入show1.html无法全屏，左侧留白且可滚动问题排查

1. show1.html的HTML结构不规范 #

你把show1.html的<style>标签放在了<head>外面，还缺少标准的<!doctype html>声明，浏览器可能进入怪异模式渲染，单独打开时浏览器会自动兼容，但在iframe中渲染时兼容性下降，就出现了留白和滚动问题。

修复后的show1.html代码： #

<!doctype html>
<html>
<head>
    <title>Show on time</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            height:100%;
            overflow:hidden; /* 彻底防止页面滚动 */
        }
        img{
            display:block;
            width:100%; 
            height:100%;
            object-fit: cover;
        }
    </style>
    <script type="text/javascript">
        var DJimages = [  
            "1.jpeg",
            "2.jpeg"
        ];
        function TODimage() {
            var now = new Date();
            var hr = now.getHours();
            var DJ = 0;
            if ((hr >= 20) && (hr < 24)) { DJ = 1; }
            document.getElementById('DJimage').src = DJimages[DJ];
            document.getElementById('DJimage').alt = DJimages[DJ];
        }
    </script>
</head>
<body onload="TODimage()">
    <img id="DJimage" src="" alt="DJimage">
</body>
</html>

修改点：

• 添加<!doctype html>声明，确保浏览器用标准模式渲染
• 将<style>标签移到<head>内部，符合HTML结构规范
• 给html、body补充padding:0和overflow:hidden，消除潜在的留白和滚动

2. 容器页（iframe所在页面）的布局问题 #

容器页的body有浏览器默认的margin，且iframe的绝对定位缺少left/top属性，导致iframe无法完全铺满页面，同时出现横向滚动条。

修复后的容器页代码： #

<!doctype html>
<html>
<head> 
    <script>
        function loadFrame (elm){
            var frame1 = document.getElementById('frame1');
            frame1.src = elm.dataset.src;
        }
    </script>
    <style>
        html,body{
            margin:0;
            padding:0;
            height:100%;
            overflow:hidden; /* 隐藏页面滚动条 */
        }
        .button-group{
            position: relative;
            z-index: 1; /* 确保按钮在iframe上方显示 */
            margin: 10px;
        }
    </style>
</head> 
<body> 
    <div class="button-group">
        <button id="b1" data-src="show1.html" onclick="loadFrame(this)">Show1</button> 
        <button id="b2" data-src="show2.html" onclick="loadFrame(this)">Show2</button> 
        <button id="b3" data-src="show3.html" onclick="loadFrame(this)">Show3</button> 
        <button id="b4" data-src="show4.html" onclick="loadFrame(this)">Show4</button> 
    </div>
    <iframe id="frame1" width="100%" style="position: absolute; top:0; left:0; height: 100%; overflow:hidden; border: none"></iframe>  
</body>
</html>

修改点：

• 给html、body添加margin:0;padding:0;height:100%;overflow:hidden，清除默认边距和滚动
• 给iframe补充top:0;left:0，确保它从页面左上角开始铺满
• 把按钮放在容器里并设置层级，避免被iframe遮挡
• 修正重复的按钮id（b2重复改为b3、b4），符合HTML规范

额外说明 #

完成以上修改后，show1.html在iframe中就能完全铺满，不会再出现留白和滚动问题。核心问题是HTML结构不规范导致的渲染异常，以及容器页未清除默认样式和正确定位iframe。

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