調整大小時的另一個元素的匹配高度

-2

好的，所以我試圖讓元素成爲頁面的整個高度。即使當我調整大小或打開檢查元素框並將其關閉時，我的html元素與頁面大小相匹配，但是我的body和其他元素不會，所以我使用javascript來使我的元素成爲html框的大小，它可以工作，但是當您調整瀏覽器窗口大小或關閉/打開開發人員工具時，html元素將調整大小，但其他元素不會調整大小。調整大小時的另一個元素的匹配高度

有沒有什麼辦法可以在我的html元素上添加一個偵聽器，以在高度變化時運行一個函數？

下面是一些代碼，我使用的是什麼有人建議，但不工作的嘗試：

$('#program-cell').height($('html').height()); 
$('html').resize(function() { 
    $('#program-cell').height($('html').height()); 
});

加入.resize（）插件後的答案一個建議我能得到它幾乎工作。當打開和關閉它的開發工具時，但調整窗口大小並沒有改變任何東西。我猜是因爲我匹配html元素的大小，但html元素會增長，以匹配我調整大小的對象的大小，這意味着它只會變得更大，並且不會變小。

我必須清除我調整大小的對象的高度，方法是將其高度設置爲auto，然後匹配html的高度。我終於得到它的工作，這裏是代碼的作品：

$('#program-cell').height(($('html').height()-84)+'px'); 
$('html').resize(function() { 
    $('#program-cell').height('auto'); 
    $('#program-cell').height(($('html').height()-84)+'px'); 
});

我有-84減去我的標題的高度。

來源

2013-03-15 Samir

一些代碼請......... – supersaiyan 2013-03-15 13:49:23

[.resize（）]（http://api.jquery.com/resize/）。 – Vucko 2013-03-15 13:50:46

我試過.resize，但它可能只適用於窗口？不是爲了元素？ – Samir 2013-03-15 13:54:30

有一個插件可以爲元素大小調整添加偵聽器，您可以使用它來做到這一點。檢查出來here.

或者，.resize()在窗口上工作。

來源

2013-03-15 13:51:28 ckersch

不錯的插件。它不關心窗口大小調整，但它確實負責打開和關閉開發人員工具框。 – Samir 2013-03-15 14:03:50

你可以用它來調用'.resize（）'情況正在發生變化大小與DIV的父元素，然後把你的JavaScript/jQuery的功能在裏面調整大小？就像'（changing_div）.resize（function_to_do_some_resizing）' – ckersch 2013-03-15 14:09:28

好吧，我用它工作。問題在於html的高度被我正在編輯的對象的高度所改變，所以爲了獲得html的高度，我不得不再次使它變小。這很難解釋，我會在我的問題中發佈我的代碼。 – Samir 2013-03-15 14:12:49

根本不需要JavaScript。

html, body { height:100%; } 
div { height:100%; }

<html> <!-- 100% of window height --> 
    <body> <!-- 100% of html height --> 
     <div></div> <!-- 100% of body height --> 
    </body> 
</html>

JSFiddle example。

如果您的分隔線的父母的值不是100％的高度，那麼您的分隔線相對於頁身不會有100％的高度。

<html> <!-- 100% of window height --> 
    <body> <!-- 100% of html height --> 
     <div style="height:30px"> <!-- 30px high parent --> 
      <div></div> <!-- 100% of parent height = 30px --> 
     </div> 
    </body> 
</html>

來源

2013-03-15 13:51:07

我試過這種方式，但我的div是非常嵌套的，身體並沒有改變它的高度，挖入它會花很長時間，我在截止日期。 – Samir 2013-03-15 13:52:30

我舉了一個例子來證明它的工作原理。因爲你不準備花一些時間來解決你的問題，所以下來投票我的答案也是一件非常蹩腳的事情。 100％高度的嵌套分隔符將具有其父代的100％高度。例如，如果您的100％高度分隔線的父級僅具有30像素高度，則100％高度分隔線的高度將僅爲30px。 – 2013-03-15 13:53:50

Downvoting？我沒有投下任何票......我是這個問題的提問者，任何潛在的解決方案都是我的耳朵！ – Samir 2013-03-15 13:55:56

調整大小時的另一個元素的匹配高度

回答

相關問題