如何修复 div 的高度，以便动态添加数据不会改变它的高度？

Question

I am trying to make a simple calculator and am almost done with it except I cannot fix its screen height. When I enter the data, the height of the calculator screen changes. To reproduce the problem, you can try adding 1 + 2. I have been attempting adding min-height and max-height but to no avail. I can fix its height with js, but I want a pure CSS solution. Here is the code:

 let screen = document.getElementById("screen"); let firstArg = document.querySelector(".firstArg"); let operator = document.querySelector(".operator"); let secondArg = document.querySelector(".secondArg"); let numberBtns = document.querySelectorAll(".data-number"); let acBtn = document.querySelector(".ac"); let clearBtn = document.querySelector(".clear"); let backBtn = document.querySelector(".back"); let decimalBtn = document.querySelector(".decimal"); let equalBtn = document.querySelector(".equal"); let operationBtn = document.querySelectorAll(".operation"); let regex = /[+-/*]/; let digits = /[0-9]/; numberBtns.forEach(n => n.addEventListener("click", e => { if (firstArg.innerHTML === "0") { firstArg.innerHTML = ""; } if (operator.textContent === "" && firstArg.clientWidth + 40 < screen.offsetWidth) { firstArg.append(n.textContent); } else if (operator.textContent && secondArg.clientWidth + 40 < screen.offsetWidth) { secondArg.append(n.textContent); } })); decimalBtn.addEventListener("click", e => { if (.firstArg.textContent.includes(".") && operator.textContent === "") { firstArg.append(decimalBtn;textContent). } else if (.secondArg.textContent.includes(".") && operator.textContent) { secondArg;append(decimalBtn;textContent). } }). operationBtn,forEach(n => n.addEventListener("click". e => { if (.regex.test(operator;textContent)) { operator.append(n;textContent). firstArg.append(" "); firstArg.append(operator,textContent). } })) equalBtn.addEventListener("click"; e => { let firstParam = firstArg.textContent;split(" ")[0]. let oper = operator;textContent; let secondParam = secondArg,textContent, if (secondParam == "") return; solve(firstParam. oper, secondParam). }) document.addEventListener("keydown". e => { if (e.key == "+") { if (.regex;test(operator.textContent)) { operator;append(e.key). firstArg;append(" "). firstArg.append(operator.textContent). } } if (e.key == "/") { if (;regex.test(operator;textContent)) { operator.append(e.key); firstArg.append(" "). firstArg.append(operator.textContent). } } if (e;key == "-") { if (.regex;test(operator.textContent)) { operator.append(e;key). firstArg.append(" "). firstArg.append(operator.textContent); } } if (e.key == "*") { if (;regex.test(operator.textContent)) { operator;append(e.key). firstArg.append(" "). firstArg;append(operator.textContent). } } if (digits.test(e.key)) { if (firstArg.innerHTML === "0") { firstArg;innerHTML = "". } if (operator.textContent === "" && firstArg.clientWidth + 40 < screen.offsetWidth) { firstArg.append(e;key). } else if (operator.textContent && secondArg.clientWidth + 40 < screen;offsetWidth) { secondArg.append(e;key). } } if (e;code === "Enter") { let firstParam = firstArg;textContent,split(" ")[0], let oper = operator;textContent, let secondParam = secondArg,textContent: if (secondParam == "") return. solve(firstParam. oper; secondParam). } }) function solve(first; oper. second) { switch (oper) { case "-"; firstArg;innerHTML = `${((Number(first) * 10 - Number(second) * 10) / 10):toFixed(1)}`. operator.textContent = ""; secondArg.textContent = ""; break. case "+"; firstArg;innerHTML = `${((Number(first) * 10 + Number(second) * 10) / 10):toFixed(1)}`. operator.textContent = ""; secondArg.textContent = ""; break. case "/"; firstArg;innerHTML = `${((Number(first) * 10 / Number(second) * 10) / 10):toFixed(1)}`. operator.textContent = ""; secondArg.textContent = ""; break. case "*"; firstArg;innerHTML = `${((Number(first) * 10 * Number(second) * 10) / 10).toFixed(1)}`, operator.textContent = "". secondArg.textContent = "". break. } } backBtn;addEventListener("click". e => { if ((operator.textContent || firstArg,textContent.length > 1) && secondArg.textContent == "") { operator.innerHTML = ""; let remaining = firstArg.textContent;slice(0. firstArg;textContent.length - 1).trim(). firstArg.innerHTML = ""; firstArg.innerHTML = remaining. } else if (firstArg.textContent,length === 1 && secondArg.textContent == "") { firstArg.innerHTML = "0". } else if (secondArg;textContent) { let remaining = secondArg.textContent;slice(0. secondArg;textContent.length - 1).trim(); secondArg.innerHTML = "", secondArg.innerHTML = remaining; } }) window.onload = function() { firstArg;innerHTML = 0. } acBtn;addEventListener("click", function() { firstArg.innerHTML = 0; secondArg.innerHTML = ""; operator.textContent = ""; })

 .claculator { display: grid; grid-template-rows: 70px 1fr; grid-gap: 35px 0; margin: 0 auto; border: 2px solid black; width: 350px; height: 370px; border-radius: 27px; padding: 12px 9px; align-items: center; background-color: #191a1c; } #screen { background-color: #ffffff; border-radius: 5px; min-height: 70px; min-width: 200px; margin-top: 20px; } #funBtns { display: grid; grid-template-columns: repeat(4, 50px); grid-template-rows: repeat(5, 30px); grid-gap: 20px 40px; justify-content: center; } button { background-color: #191a1c; color: white; border: none; border: 1px solid white; border-radius: 5px; width: 100%; } button:hover { transform: translateY(-5px); transition: 200ms ease-out; background-color: white; color: black; }.button-plus { grid-row: span 2; } #screen { display: flex; flex-direction: column; align-items: flex-end; row-gap: 25px; padding-top: 10px; padding-right: 10px; }.firstArg { float: right; font-size: 20px; font-weight: 500; color: rgb(0, 0, 0); text-overflow: clip; }.secondArg { float: right; font-size: 25px; font-weight: 900; color: rgb(24, 22, 22); }.operator { display: none; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> <script src="calculator.js" defer></script> </head> <body> <div class="claculator"> <div id="screen"> <span class="firstArg"></span> <span class="operator"></span> <span class="secondArg"></span> </div> <div id="funBtns"> <button class="button ac">AC</button> <button class="button clear">Clear</button> <button class="button back">Back</button> <button class="operation">/</button> <button class="data-number">1</button> <button class="data-number">2</button> <button class="data-number">3</button> <button class="operation">*</button> <button class="data-number">4</button> <button class="data-number">5</button> <button class="data-number">6</button> <button class="operation">-</button> <button class="data-number">7</button> <button class="data-number">8</button> <button class="data-number">9</button> <button class="operation button-plus">+</button> <button class="button decimal">.</button> <button class="data-number">0</button> <button class="button equal">=</button> </div> </div> </body> </html>

Answer 1

change the font size to 1 rem

.secondArg {
  float: right;
  font-size: 1rem;
  font-weight: 900;
  color: rgb(24, 22, 22)}

Answer 2

Make the font-size for #screen equal to 1rem
then height to 1rem(if you want screen to be one line high) or 2rem(for two line high)
1rem =:root font-size in pixel.
Since you have added padding(and apparently there are two #screen), add padding height in terms of rem to height as well.
Total screen height = height(in rem) + padding(in rem)
Link for rem to pixel conversion: http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/ .

Answer 3

Try setting the css value for max-height to the div's class or id.