Установка max-height для cal c с использованием JavaScript не работает (невозможно присвоить свойству CSS)

Question

ОБНОВЛЕНИЕ: Даже document.getElementById("chatbox").style.maxHeight = "calc(100% - 54px);"; с JS не сработало, поэтому проблема в присвоении свойству CSS. Изменение значения вручную на вкладке Элементы инструментов разработчика Chrome работает должным образом.

Существует событие, когда я создаю p и вставляю его перед элементом . Затем мне нужно пересчитать максимальную высоту div , чтобы избежать появления ненужных полос прокрутки. Чтобы пересчитать максимальную высоту, я создаю строку в JS:

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"

, pin , являющуюся вновь созданным p элементом.

Строка возвращается, как предполагается: calc(100% - 25px - 29px);, однако document.getElementById("chatbox").style["max-height"] не принимает ее и остается неизменной.

Исходное значение по умолчанию для max-height - calc(100% - 25px);, при этом 25px - фиксированная высота другого div, который имеет фиксированную позицию.

Я пытался добавить 25 к pin.getBoundingClientRect (). height, но он все равно не работал.

Изменение значения max-height чтобы строка mhstr в инструментах разработчика Chrome выполнила свою работу, но я хочу, чтобы она была изменена с помощью скрипта.

Вот объект div:

<div id="chatbox" style="overflow-y: auto; max-height: calc(100% - 25px);">

Вот код, который я использую, чтобы попытаться изменить значение максимальной высоты:

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"
console.log(mhstr);
document.getElementById("chatbox").style["max-height"] = mhstr;

Примечание: mhstr возвращает calc(100% - 25px - 29px);, изменяя ["max-height"] или maxHeight до фиксированного значения, такого как 0, «2px» или «100%», работает нормально, но не меняется на mhstr.

Answer 1

Если вы хотите использовать процентный тип данных для свойства max-height, как в следующих примерах:

max-height: 100%;
max-height: calc(100% - 25%);
max-height: calc(100% - 25px);
...

Тогда у вас должен быть родительский элемент с фиксированной высотой .

Так что не имеет значения, вы устанавливаете 'max-height' в CSS или JS в этом случае!

---

Как вы можете см. в примере ниже, первая группа имеет родителя с фиксированной высотой, напротив, вторая группа имеет родителя с нефиксированной высотой.

Таким образом, первая полускрытая после установки параметра max -высота , но вторая вообще не меняется!

document.getElementById("fixed-height-child").style.maxHeight = "10%";
document.getElementById("unfixed-height-child").style.maxHeight = "10%";

#fixed-height{
  height: 75px; /* parent height is specified exactly */
}

#unfixed-height{
  /* height value is not specified */
}

.child{
  overflow: hidden;
}

<div id="fixed-height">
  <p id="fixed-height-child" class="child">
    PARENT WITH FIXED HEIGHT
  </p>
</div>

<br/>
<br/>
<br/>

<div id="unfixed-height">
  <p id="unfixed-height-child" class="child">
    PARENT WITH UNFIXED HEIGHT
  </p>
</div>

Answer 2

В Firefox это работает безупречно:

const maxHeight = "calc(20px - 10px)";

chatbox.style.maxHeight = maxHeight;

#chatbox {
  background-color: yellow;
  overflow: hidden;
}

<div id="chatbox" style="overflow-y: auto; max-height: calc(100px - 25px);">test</div>

Answer 3

Если 25px является фиксированным значением, почему бы не изменить вашу формулу следующим образом?

const mhstr = `calc(100% - ${25 + pin.getBoundingClientRect().height}px);`;
document.getElementById('chatbox').style.maxHeight = mhstr;