Как установить рост тела с помощью JavaScript? ⇐ CSS

[Anonymous]

Код: Выделить всё

document.body.height = document.getElementById("page-main").clientHeight + 400;

Код: Выделить всё

#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}

#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}

Код: Выделить всё

main

footer

У меня есть элемент div нижнего колонтитула с положением: исправлено; внизу: 0px; и основной элемент содержимого с позицией: Absolute;.

По сути, идея состоит в том, чтобы основной элемент содержимого действовал как лист бумаги поверх статического фона документа, чтобы вы могли прокручивать содержимое страницу, и когда вы дойдете до ее конца, вам нужно будет прокрутить еще пару сотен пикселей, чтобы открыть нижний колонтитул под элементом основного контента.

Я разрешил это на моей целевой странице, выяснив высоту тела, необходимую для создания дополнительного пространства внизу, и установив высоту с помощью высоты: 1720 пикселей; на самом теле. Однако я хотел бы реализовать это таким образом, чтобы оно не должно было быть постоянным, поскольку я боюсь, что браузеры и устройства могут иметь разную высоту отображения для основного элемента содержимого, и я хотел бы использовать это на нескольких страницах без необходимости для индивидуального жесткого кодирования высоты тела.

Я попытался использовать JavaScript, чтобы найти высоту элемента div основного содержимого (используя clientHeight, который, кажется, работает идеально), и добавить пару сто пикселей к этому числу для высоты тела следующим образом:

Код: Выделить всё

document.body.height = document.getElementById("page-main").clientHeight + 400;

а также попробовал изменить следующее:

Код: Выделить всё

document.body.style.height
document.body.style.paddingBottom

Это вообще не меняет высоту тела. Я попробовал использовать аналогичный подход, чтобы изменить фон тела на красный, это работает, но по какой-то причине просто отказывается конкретно менять высоту. Я пробовал разместить этот скрипт в голове, над телом и в конце тела. Не помогает. Поиск clientHeight основного содержимого div работает нормально, добавление 400 к этому числу кажется достаточно простым, и я знаю, что у документа определенно есть тело, поэтому я очень озадачен тем, почему может быть так, что JavaScript отказывается изменять высоту тела.

Я проверил консоль в Edge и Chrome, и кажется, что проблем нет, поэтому я здесь совершенно запутался. Обычно я могу найти ответы в Интернете, и мне никогда не приходилось просить о помощи, но сейчас мне кажется, что это такой простой вопрос, и я понятия не имею, почему он не сработает.

Извините, если этот вопрос написан неправильно, но есть ли у кого-нибудь идеи, почему JavaScript не позволяет изменять высоту тела?

TL;DR:

• элемент div содержимого позиционируется абсолютно и может меняться в зависимости от сценария
  Div нижнего колонтитула статично расположен внизу и должен открываться под div с контентом, позволяя пользователю прокручивать на пару сотен пикселей ниже конца div с контентом.
  Я хочу добиться этого, изменив высоту тела, что отлично работает с помощью жесткого кодирования в html, но по какой-то причине JavaScript отказывается изменять высоту тела< /li>

Подробнее здесь: https://stackoverflow.com/questions/490 ... javascript