Home / Questions / 22650
Accepted
Jose Hermosilla Rodrigo
Asked: 2020-09-06 07:23:25 +0800 CST 2020-09-06 07:23:25 +0800 CST

problem using height 100% in an app using electron

  • 772

Hello, I am developing a desktop application using electron. The app just, for now, displays a map created with openlayers 3. Trying to make the map fill the full height of the window with the property css height : 100%;seems to "do not listen".

I have verified that the height of the map varies only when the width varies, no matter what height you set, as if it were proportional to the width of the map.

mainWindow {width : 800, height : 600}

mainWindow {width : 600, height : 600}

Looking at the dev tools, it seems that the style is applied but it does not respect the height, why?

javascript

3 Answers

  1. Best Answer

    If I understand your question, what you want is to adapt the map depending on the height and width of the screen, that is, make it responsive.

    This is all because you may not be setting a height:100% to the parent element where you have your map, which in this case would be the html and body tag. I leave you an example that I have already put here a few times, I hope it will help you.

    html, body{
  height:100%;
}

#responsive{
  background-image:url("http://mexicocarrental.mx/wp-content/uploads/2015/07/manzanillo-04.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width:100%;
  height: 100%;
  display:table;
}

.text-center{
  display: table-cell;
  vertical-align: middle;
  width:450px;
  font-size:2em;
  color:#FFFFFF;
  text-shadow:0px 2px 5px #000000;
}
    <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <section id="responsive">
      <div class="text-center">
        ¡La imagen de fondo de mi pantalla se adapta al tamaño!
      </div>
    </section>
  </body>
</html>

    If you notice, it adapts to the size of the screen. I hope it helps you and if you have any questions, I will gladly read it to help you! Greetings.

    • 1

  2. Actually the problem is when sizing the windows in Electron BrowserWindow: for them to be sized to the full size of the window just import the screen module from electron or run electron.screensomething like this; the method getPrimaryDisplayreturns a lot of data, you must choose the one that best suits your needs. You can check more in the API documentation .

    const { app, BrowserWindow, screen } = require('electron')

    let win
    app.whenReady().then(() => {
      const { width, height } = screen.getPrimaryDisplay().workAreaSize
      win = new BrowserWindow({ width, height })
      win.loadURL('https://github.com')
    })
    • 0

  3. You can use 100vhinstead of 100%and that's it.

    Measurements vhrefer to the size of the screen and not the size of the element's parent .

    • -2