javascript - the content (webview) doesnt fill the app window -
i'm trying out electron create standalone version of website, have main.js (excerpt)
function createwindow() { // create browser window. mainwindow = new browserwindow({ width: 800, height: 600, "min-width": 800, "min-height": 500, resize: true, "use-content-size": true }); // , load index.html of app. mainwindow.loadurl('file://' + __dirname + '/index.html'); // open devtools. mainwindow.webcontents.opendevtools(); // set window resizable mainwindow.isresizable(true); // emitted when window closed. mainwindow.on('closed', function () { // dereference window object, store windows // in array if app supports multi windows, time // when should delete corresponding element. mainwindow = null; }); } then index.html looks this:
<!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> unfortunately content (webview) not resized fill available space, has full width height remains @ 150px, when manually set different size in inspector panel adjusts. how can tell webview should take full space? percentage doesnt work ie.
webview { width:100%; height:100%; } i have added following code 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> which outputs following results (height 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
you've set height of webview 100%, didn't set explicit height parent (in case body). giving body , explicit size should fix problem:
body { width: 100vw; height: 100vh; } see also:
Comments
Post a Comment