jquery - 使用JQuery根据浏览器高度和另一个元素的高度设置元素的边距

Question

我正在为一个网站编写代码，该网站的标题在倾斜 270 度并固定在页面底部的 div 中；每个页面的标题都会更改，我希望内容以与页面加载时标题开始的垂直高度相同的高度开始。所以说浏览器是 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>