HTML模板仅显示在左上角的技术问题求助

问题原因 #

<object> 元素默认带有较小的内置宽高，且作为独立的浏览上下文运行，它不会自动适配外层容器尺寸，当内部内容超出默认尺寸时还会自动显示滚动条，这就是模板单独运行正常但嵌入后显示异常的核心原因。

解决方案 #

方案1：为object标签设置适配样式 #

直接给<object>元素指定匹配模板内容的宽高，移除默认边框并隐藏滚动条：

修改index.html中的script部分：

var navbarContainer = document.getElementById('navbar-container');
navbarContainer.innerHTML = '<object type="text/html" data="template.html" style="width:100%; height:500px; border:none; overflow:hidden;"></object>';

或在index.html的<head>中添加全局样式（更易维护）：

<head>
  <meta charset="utf-8" />
  <title>My Navbar Template</title>
  <style>
    #navbar-container object {
      width: 100%;
      height: 500px; /* 与template中.navbar的height保持一致 */
      border: none;
      overflow: hidden;
    }
  </style>
</head>

方案2：使用Fetch直接加载模板内容 #

放弃<object>标签，通过Fetch API获取模板的HTML内容并直接插入容器，让模板样式与主页面上下文融合，自动适配容器尺寸：

修改index.html的script部分：

var navbarContainer = document.getElementById('navbar-container');
fetch('template.html')
  .then(response => response.text())
  .then(html => {
    navbarContainer.innerHTML = html;
  });

注意：此方法需在本地服务器环境（如Live Server、XAMPP）下运行，直接打开file://协议的HTML文件会触发跨域限制。

方案对比 #

• 方案1：保持模板独立性，样式不会污染主页面，但需手动同步模板与object的尺寸。
• 方案2：内容与主页面完全融合，尺寸自动适配，但模板样式可能与主页面样式冲突，需注意样式隔离。

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