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

【问题标题】：How to adapt a calculator application height written in html5 / javascript / css3 (which is inside an android webview) to any device screen height?如何使用 html5 / javascript / css3（在 android webview 中）编写的计算器应用程序高度适应任何设备屏幕高度？
【发布时间】：2019-08-22 09:10:50
【问题描述】：

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

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

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

【问题讨论】：

欢迎来到 SO @Alberto。请您分享您认为的 HTML，以便我们提供帮助。
非常感谢迈克！好的，我将立即分享 HTML。只有我把整个东西放在桌子外面检查它是否可以工作，但没有成功。

标签： javascript java android html css

【解决方案1】：

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

您想要做的是让section 标记与屏幕高度相同。按钮将是此section 标记高度的 25%，因此是屏幕高度的 25%。为此，您需要将 section 标签的高度设为 100%。但同样，section 标记父级的高度 (body) 也具有所需的最小值的默认高度。所以你需要将body 的高度也设置为100%。 html 标签也是如此。

所以你只需要添加这段 css：

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

【讨论】：

非常感谢！！！效果很好，正是我需要的！再一次感谢你！ :-)
@Alberto，不客气。不要忘记为正确的答案投票，并将标记为“已接受”。它也会帮助其他人;)