[Solved] Webview doesn't fill the parent div height


#1

I was hoping with the following code, the webview element would fill the entire parent div height, but no luck.

Please suggest what I should do to get it working.

HTML

    <div id="wrapper">
      <div id="header">
        Header
      </div>
      <div id="contentWrapper">
        <webview id="content" src="http://www.google.com/" autosize="on"></webview>
      </div>
      <div id="footer">
        Footer
      </div>
    </div>

CSS

    #wrapper {
      height: 100%;
      background-color: blue;
      display: flex;
      flex-direction: column;
    }
    #header { 
      background-color:gray;
      height: 40px;
    }
    #contentWrapper {
      flex: 1;
      background-color: green;
    } 
    #footer {
      background-color: gray;
      height: 40px;
    }


#2

Maybe if you add the following?

#content {
  height: 100%;
}

#3

@olmokramer that didn’t help.

As i was using AngularJS, finally, i ended up writing a directive that, on window resize event, calulates the contentWrapper’s height/width and applies the style property to it’s child element (with id ‘content’).

Here is the code -

AngularJS Direcive

    app.directive('master', function($window) {    
      return function(scope, element, attrs) {
        var w = angular.element($window);
        scope.$watch(function() {
          scope.style = {
            height:element[0].offsetHeight+'px',
            width:element[0].offsetWidth+'px',
            display: 'block' // this is needed too..
          };
        });
        w.bind('resize', function() {
          scope.$apply();
        });
      };
    })

HTML

    <div id="wrapper">
      <div id="header">
        Header
      </div>
      <div master id="contentWrapper">
        <webview ng-style="style" id="content" src="http://www.google.com/" autosize="on"></webview>
      </div>
      <div id="footer">
        Footer
      </div>
    </div>

#4

Guys, in case if you have a better/simpler way of handling this, let me know your solution.


#5

How about this?

#contentWrapper {
  position: relative;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#6

Wrapping the webview in a div ans setting the height/width to 100% with autosize on works for me, it’s not perfect and the response is slow, flex-box might help solve that issue

<div style="width:100%; height:100%">
        <webview src="https://google.com" autosize="on" style="min-width:900px; min-height:600px"></webview>
    </div>


#7

Perfect. Works well. This is lot better than angular directive. Thanks @olmokramer