Избегайте увеличения высоты текстового поля при вводе значения

Question

Моя проблема в том, что высота текстового поля изменяется при вводе текста / значения внутри текстового поля. И я не хочу. Вот мой код

<div class="twoColumnsSettings">
  <div>
    <label>Voltage</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Voltage Limit</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Current</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Current Limit</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
</div>

.twoColumnsSettings {
  display: grid;
  grid-row-gap: 8%;
  grid-template-columns: 50% 50%;
  width: 80%;
  margin: 0 auto;
  padding-left: 5%;
  text-align: left;
}

.textBox {
  width: 87.5%;
  height: 100%;
  font-size: 1.8vw;
}

.dropDownbox {
  width: 87.5%;
}

Я устанавливаю высоту / ширину в%, если я хочу, чтобы размер изменялся при изменении размера окна / приложения.

Answer 1

Вы можете использовать VH и VW свойства для размера. (Отзывчивые единицы)

Высота области просмотра (vh) - Эта единица измерения основана на высоте области просмотра. Значение 1vh равно 1% высоты области просмотра.

Высота области просмотра (vh) - эта единица измерения основана на высоте области просмотра. Значение 1vh равно 1% высоты области просмотра.

---

* Область просмотра = размер окна браузера. Если ширина области просмотра составляет 50 см, 1vw = 0,5 см.

Пример:

*{
  padding:0px;
  margin:0px;
}
#test{
  background-color:black;
  width:100vw;
  height:100vh;
}

<div id="test">
</div>

Достигается полная ширина и высота области просмотра
Обязательно добавьте,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> Элемент viewport предоставляет браузеру инструкции по управлению размерами и масштабированием страницы.