htmlcssnode.jselectronelectron-webview

can't change height of webview element

I am creating a desktop web browser (target platform is Windows) using electron. I am using a <webview> element to display the contents of a target URL. I am unable to change its height, despite explicitly setting the height of its parent and setting the webview's height to 100%. The following is a screenshot of my issue:

Screenshot of the issue described

As you can see, the <webview> element's height doesn't fill its parent div's (white) height. Here is the HTML code defining the webview and its parent:

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

... and here is the CSS for these elements:

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

I wish to fill the remaining space of the div with the content of the webview.

Solution

  • As stated here, <webview> is not explicitly supported by electron. For this reason I am using the WebContentsView class which is handled by the main process. I added this code to main.js:

    pageView = new WebContentsView();
window.contentView.addChildView(pageView);
pageView.webContents.loadURL("https://www.github.com");

pageView.setBounds({
    x: 8,
    y: 97,
    width: 1200 - 16,
    height: 800 - 97 - 8,
});

    This enabled me to render the web page with the given dimensions: enter image description here