Electron开发Windows桌面浏览器：webview无法填充父容器高度问题

核心修复方案 #

给<webview>添加display: block样式，同时优化父容器布局，确保webview能完全填充剩余空间。

修改后的完整代码 #

HTML部分

<div id="web-content">
    <webview id="webview" src="https://www.github.com"></webview>
</div>

CSS部分

/* 先确保根元素高度正确 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#web-content {
    background-color: #ffffff;
    width: calc(100% - 16px);
    height: calc(100% - 97px - 8px);
    position: fixed;
    left: 8px;
    border-radius: 0 0 4px 4px;
    top: 97px;
    /* 可选：用flex布局强制子元素填满容器 */
    display: flex;
}

#web-content #webview {
    height: 100%;
    width: 100%;
    display: block; /* 关键：修复inline-block导致的百分比高度失效 */
    border: none; /* 移除默认边框，消除视觉留白 */
}

问题原因拆解 #

1. Webview默认显示属性：Electron的<webview>默认是inline-block类型，这类元素的百分比高度不会自动继承父容器高度，必须设置为display: block才能让height: 100%生效。
2. 根元素高度缺失：如果html和body没有设置height: 100%，父容器的calc(100%)会基于内容高度计算，而非整个视口高度，导致高度计算错误。
3. 默认边框干扰：Webview自带默认边框，会造成视觉上的留白，添加border: none可以彻底消除这个问题。

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