无法更改webview元素的高度

Question

我正在使用电子创建一个桌面网络浏览器（目标平台是Windows）。我正在使用

<webview>

元素来显示目标 URL 的内容。尽管明确设置了其父级的高度并将 webview 的高度设置为

100%

，但我无法更改其高度。以下是我的问题截图：

如您所见，

<webview>

元素的高度没有填充其父 div 的（白色）高度。这是定义 webview 及其父级的 HTML 代码：

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

...这是这些元素的 CSS：

#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;
}

#web-content #webview {
    height: 100%;
    width: 100%;
}

我希望用 webview 的内容填充 div 的剩余空间。

Answer 1

原子花生 请使用此代码。

#web-content {
    background-color: #ffffff;
    width: calc(100% - 16px);
    height: calc(100% - 97px - 8px);
    position: fixed;
    left: 8px;
    top: 97px;
    border-radius: 0 0 4px 4px;
    display: flex;
    flex-direction: column;
}

#web-content #webview {
    flex: 1;
}