使用JQuery根據瀏覽器高度和另一個元素的高度爲元素設置頁邊距

Question

我正在編寫一個網頁，該頁面的標題位於270度傾斜並固定在頁面底部的div中;這個標題隨着每個頁面的變化而變化，我希望內容在頁面加載時標題開始時的垂直高度開始。所以說瀏覽器是900px高，標題是500px我希望content 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>