Установка поля для элемента в соответствии с высотой браузера и высотой другого элемента с помощью JQuery

Question

Я кодирую сайт с заголовком в div, который наклонен на 270 градусов и прикреплен к нижней части страницы;этот заголовок изменяется для каждой страницы, и я хотел бы, чтобы содержимое начиналось с той же вертикальной высоты, что и заголовок, начинающийся при загрузке страницы.Допустим, браузер имеет высоту 900px, а заголовок - 500px. Я бы хотел, чтобы верхний край содержимого div составлял 400px.Есть ли простой способ сделать это с JQuery?Я знаю, что вам нужно сначала получить обе высоты, а затем сформировать уравнение, но я слишком любитель в JQuery, чтобы сделать это.Помощь

Answer 1

Вы можете сделать это с помощью следующего сценария, заменив #content вашим контейнером и h1 с элементом заголовка, зафиксированным внизу:

<script type="text/javascript">
$(document).ready(function() {
  $("#content").css("margin-top", $(window).height() - $("h1").height());
});
</script>

Это, однако, устанавливает только margin-topпри загрузке страницы, поэтому он не обновляет поля, если пользователь изменяет размер окна своего браузера.Это для спасения (опять же замена элементов, очевидно):

<script type="text/javascript">
$(window).resize(function() {
  $("#content").css("margin-top", $(window).height() - $("h1").height());
});
</script>