How to adapt a calculator application height written in html5 / javascript / css3 (which is inside an android webview) to any device screen height?

I'm using relative units for everything (percentages): fonts, width and height of a table, etc. But still the table which contains the calculator buttons and display, doesn't match any device's screen size.

I have tried setting every button's "height" attribute to a certain percentage, as well as the calculator's display, so that I could make the calculator box fit the entire device screen.

.botonesOP{

border-style:groove;
border-width:2px;
border-radius:10%;
text-align:center;
font-size:100%;
width:22.5%;
height:25%;



box-shadow: 7px 7px 30px rgb(113, 247, 135);
    background: radial-gradient(rgb(12, 133, 42), rgb(13, 68, 5), 
rgb(6, 44, 2));
    color: white;

}

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript" src="operaciones.js"></script>
    <link href="estiloscalc.css" rel="stylesheet"/>



</head>

<body>



    <section>



        <div>


       <input type="text" id="display" readonly>

        </div>


                <input type="button" class="botonesN" onclick="siete()" value="7">
                <button type="button" class="botonesN" onclick="ocho()">8</button>



                <button type="button" class="botonesN" onclick="nueve()">9</button>

                <button type="button" class="botonesOP" onclick="mas()">+</button>






                <button type="button" class="botonesN" onclick="cuatro()">4</button>
                <button type="button" class="botonesN" onclick="cinco()">5</button>

                <button type="button" class="botonesN" onclick="seis()">6</button>

                <button type="button" class="botonesOP" onclick="menos()">-</button>





                <td><button type="button" class="botonesN" onclick="uno()">1</button>
                <td><button type="button" class="botonesN" onclick="dos()">2</button>

                <td><button type="button" class="botonesN" onclick="tres()">3</button>

                <td><button type="button" class="botonesOP" onclick="multip()">x</button>






                <button type="button" class="botonesN" onclick="punto()">.</button>
                <button type="button" class="botonesN" onclick="cero()">0</button>

                <button type="button" class="botonesN" onclick="igual()">=</button>

                <button type="button" class="botonesOP" onclick="divis()">/</button>






                <button type="button" class="botonesOP" onclick="ce()">C</button>
                <button type="button" id="botonEspecial" onclick="cuo()">CÚO</button>


    </section>






</body>






</html>

Solution

it is because your buttons height percentages are relative to their parent's height. In this case, the parent of your buttons is the section tag. This tag default height is just the minimal height for which all components fits in and not the screen's height. See more about the default height and it's behaviour here.

What you want to do is to give the section tag the same height as the screen. Than the buttons will be 25% of this section tag's height and thus 25% of the screen height. To do so, you'll need to give the section tag a height of 100%. But again, the section tag parent's height (body) has also a default height of the minimum needed. So you need to set the body's height also to 100%. And the same for the html tag.

So all you need to add is this piece of css:

html, body, section {
    height: 100%;
}