如何使以html5 / javascript / css3（位于android webview中）编写的计算器应用程序高度适应任何设备的屏幕高度？

Question

我对所有（百分比）使用相对单位：字体，表格的宽度和高度等。但是仍然包含计算器按钮和显示的表格与任何设备的屏幕尺寸都不匹配。

我尝试将每个按钮的“高度”属性以及计算器的显示设置为一定百分比，以便使计算器框适合整个设备屏幕。

.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>

Answer 1

这是因为您的按钮高度百分比是相对于其父项的高度而言的。 在这种情况下，按钮的父级是section标签。 标签的默认高度只是所有组件都适合的最小高度，而不是屏幕的高度。 在此处查看有关默认高度及其行为的更多信息。

您要做的是为section标签赋予与屏幕相同的高度。 比按钮高出该section标签高度的25％，因此是屏幕高度的25％。 为此，您需要将section标签的高度设置为100％。 但是同样， section标签父级的身高（ body ）也具有所需的最小值的默认高度。 因此，您还需要将body的高度也设置为100％。 与html标记相同。

因此，您需要添加的只是这一段css：

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

如何使以html5 / javascript / css3（位于android webview中）编写的计算器应用程序高度适应任何设备的屏幕高度？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-22 09:53:52

如何使以html5 / javascript / css3（位于android webview中）编写的计算器应用程序高度适应任何设备的屏幕高度？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-22 09:53:52

解决方案1
1 已采纳 2019-08-22 09:53:52