How to make html to fill full screen height on webview in android browser


Tags: javascript,android,css,webview

Problem :

I added a webview on a AppCompatActivity and want to make it to fill full screen. I have tried the method mentioned on this link(How to make full screen in Android 4.0) but it doesn't help.

Below is the layout xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lenovo.mds.mbgcompass.MainActivity">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"
    />
</RelativeLayout>

Below is the MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

    webView = (WebView) findViewById(R.id.webView);
    setupWebView();
}

private void setupWebView(){
    webView.getSettings().setSupportZoom(true);
    webView.getSettings().setBuiltInZoomControls(false);
    webView.getSettings().setCacheMode(android.webkit.WebSettings.LOAD_NO_CACHE);
    webView.getSettings().setDefaultTextEncodingName("UTF-8");
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDatabaseEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.loadUrl("file:///android_asset/index.html");
}

Below is the html css style to make the html dom to be 100% height. but it doesn't work on android browser. If I change the height to be "100hv", it only works on chrome browser not android browser. What else should I try to make the html dom to fill in 100% height of the screen?

var style = {
width: '100%',
margin: '0 auto',
height: '100%'
}

Please see below screenshot. I think the webview is filling the full screen of the device but the html inside the webview doesn't fill in. How can I fill in the bottom while space?

enter image description here



Solution :

There is no problem in it. However edit your xml file as this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lenovo.mds.mbgcompass.MainActivity">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:id="@+id/webView"
    />
</RelativeLayout>

    CSS Howto..

    How to overlay divs with pure css?

    How to Dynamically Fit image in screen using css

    How to vertically align Facebook and Twitter share buttons

    How to place two divs next to each other -HTML/CSS

    CSS how to not use style

    How to identify is a blog post has been selected or not?

    How to combine two images into one so I can vertically align across all browsers?

    How can I override CSS id?

    how to compute Facebook graph api cover offset_y to pixel?

    CSS media type: How to load CSS for mobile?

    How to change SVG color (when using the SVG as background in CSS)

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to draw a line with button the center of the line

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to toggle visibility of 2 divs after clicking a mailto link?

    Show/Hide inline Form

    How to apply this effect to the last line of a text?

    Show different text based on OS

    How can I reload css styles when change windows width?

    How to “crop” a rectangular image into a square with CSS?

    How to override\edit Zurb Foundation base CSS styles?

    how to make css nested colors in one div bacground

    CSS - how to trim text output?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    How to override css img properties?

    How to remove hover effect from a column of a table

    How to display a css animation in the center of the screen

    How to render CSS conditionally in page

    How to place html css php in javascript (Jquery)