Electron应用中HTML底部空白消除与窗口适配问题

一、完善CSS基础样式 #

你仅设置了height:100vh，但未清除html和body的默认边距，且vh在Electron窗口中可能存在尺寸计算偏差，改用以下CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 直接消除滚动条 */
}

如果是Vue项目，记得给根容器（通常是#app）也设置高度：

#app {
  height: 100%;
}

二、调整Electron窗口配置 #

从你的代码看，存在两个关键问题：未明确设置窗口初始尺寸（透明窗口需要明确的尺寸基准）、未指定透明背景色（部分环境下默认背景色会影响尺寸计算）。修改后的配置如下：

const win = new BrowserWindow({
    // fullscreen: true,
    alwaysOnTop: !isDevelopment,
    frame: isDevelopment,
    autoHideMenuBar: true,
    transparent: true,
    backgroundColor: '#00000000', // 明确设置全透明背景
    width: 800, // 根据需求设置初始宽度
    height: 600, // 根据需求设置初始高度
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      devTools: isDevelopment,
      backgroundThrottling: false // 避免背景节流导致的渲染异常
    }
})

三、额外排查点 #

• 如果是生产环境（frame:false），检查是否有自定义标题栏逻辑占用了内容高度
• 窗口创建完成后，可尝试强制同步尺寸：

  win.on('ready-to-show', () => {
    win.webContents.setZoomFactor(1) // 确保缩放比例为100%
    win.setBounds(win.getBounds()) // 强制刷新窗口尺寸
  })
  

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