内容（网络视图）未填充应用程序窗口

Question

内容（网络视图）未填充应用程序窗口

Luk*_*ela 3 javascript css webview electron

我正在尝试电子创建网站的独立版本，我有这个main.js（摘录）

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        "min-width": 800,
        "min-height": 500,
        resize: true,
        "use-content-size": true
    });

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Open the DevTools.
    mainWindow.webContents.openDevTools();
    // Set Window Resizable
    mainWindow.isResizable(true);

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
}

Run Code Online (Sandbox Code Playgroud)

然后index.html看起来像这样：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #6e6e6e;
        }
        webview {
            display: block;
        }

    </style>
</head>

<body>
    <webview src="build/index.html" disablewebsecurity></webview>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

不幸的是，当我在检查器面板中手动设置不同的大小然后进行调整时，内容（webview）的大小（未调整）以填充可用空间，它具有完整的宽度，但高度保持为150px。我怎样才能告诉webview它应该占用全部空间？百分比不起作用，即。

webview {
width:100%;
height:100%;
}

Run Code Online (Sandbox Code Playgroud)

我已将以下代码添加到 index.html

<script>
    function onResize() {
        var height = document.body.clientHeight;
        var width = document.body.clientWidth;
        console.log("onResize", arguments, width, height);
    }
    addEventListener('resize', onResize);

</script>

Run Code Online (Sandbox Code Playgroud)

输出以下结果（高度始终为150！）

onResize [Event] 216 150
index.html:27 onResize [Event] 216 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event]                1080 150
        0: Event
            bubbles: true
            cancelBubble: false
            cancelable: false
            currentTarget: null
            defaultPrevented: fals
            eeventPhase: 0
            isTrusted: false
            isTrusted: false
            newHeight: 150
            newWidth: 1080
            path: Array[5]
            returnValue: true
            srcElement: webview
            target: webview
            timeStamp: 1453905541457
            type: "resize"__proto__: Event
            callee: onResize()
            length: 1
            Symbol(Symbol.iterator): values()
            __proto__: Object

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vad*_*gon 5

您已将的高度设置webview为100%，但没有为父级设置显式的高度（在本例中为body）。给出body和明确的大小应该可以解决您的问题：

body {
    width: 100vw;
    height: 100vh;
}

Run Code Online (Sandbox Code Playgroud)

也可以看看：

归档时间：	9 年，9 月前
查看次数：	2768 次
最近记录：	9 年，9 月前