HTML iframe样式问题求助：CSS修复报错页面iframe异常

你的代码里有几个关键问题导致iframe显示异常，直接给你修正后的代码并说明修改点：

核心问题分析 #

1. <head>标签内嵌套了<div class="page-setup">，这是无效的HTML结构，浏览器会自动将这个div移到<body>里，导致样式和布局解析混乱。
2. footer设置了固定height: 50px，但里面的.iframe-container高度是500px，直接导致iframe内容被截断，无法正常显示。
3. 没有处理iframe内GIF的宽高比例，在小屏幕上容易拉伸变形。

修正后的完整代码 #

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="icon" href="[你的图标URL]">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CD ERR PAGE</title>
    <style>
        body { 
            background-color: #ff0000;
            text-align: center;
            margin: 0;
            padding: 0;
            min-height: 100vh; /* 让页面占满整个视口高度 */
            display: flex;
            flex-direction: column; /* 垂直排列内容和footer */
        }
        .content {
            padding: 20px;
            box-sizing: border-box;
            flex: 1; /* 让内容区域自动填充剩余空间，footer推到底部 */
        }
        h1 {
            font-size: 24px;
            color: white;
        }
        p {
            font-size: 16px;
            color: white;
        }
        footer {
            width: 100%;
            padding: 20px 0; /* 给footer添加上下内边距，避免内容贴边 */
            box-sizing: border-box;
        }
        .iframe-container {
            max-width: 730px; /* 最大宽度限制 */
            width: 90%; /* 小屏幕下占90%宽度 */
            margin: 0 auto; /* 水平居中 */
            aspect-ratio: 730/500; /* 维持GIF的原始宽高比，避免拉伸 */
            border: 3px solid white;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Sorry, this countdown is currently broken or is being worked on.</h1>
        <p><b>You can check out my <a href="[你的HTML hub地址]" target="_blank">HTML hub</a>.</b></p>
        <p><b>This issue will be resolved shortly.</b></p>
    </div>
    <footer>
        <div class="iframe-container">
            <iframe src="[错误GIF的URL]"></iframe>
        </div>
    </footer>
</body>
</html>

关键修改说明 #

• 移除了<head>内的无效<div>标签，恢复正确的HTML结构。
• 给body设置min-height: 100vh和flex-direction: column，让页面自动占满视口，同时将footer固定在页面底部。
• 去掉footer的固定高度，改用内边距调整间距，让它根据内容自适应高度。
• 给.iframe-container添加aspect-ratio: 730/500，匹配GIF的原始宽高比，确保在任何屏幕尺寸下都不会拉伸变形；同时设置width: 90%和margin: 0 auto，实现小屏幕的自适应居中。
• 用flex: 1让内容区域自动填充剩余空间，避免footer遮挡内容。

这样修改后，iframe就能正常显示，同时页面在手机、平板等设备上也能自适应布局，不用退回到纯HTML状态。

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