2010-04-27 88 views
4

進出口尋找一種方式,在JavaScript中,計算瀏覽器(px)的大小,然後計算<div>的從全屏幕尺寸帶走50px大小:的Javascript/jQuery的高度計算

例如

Browser screen size: 800px (Height) 
Existing <div> that is always 50px (Height) 
Leaves 750px (Height) for the remaining <div> to fill the page. 

然後採取750px並把它作爲內聯樣式:

<div style="height: 50px"> 
<img src="banner.png" /> 
</div> 

<div style="height: x"> 
This fills the remainder of the page 
</div> 
+0

如果你想檢查可以影響DIV高度的其他屬性('margin','padding'和'border'),可以使用'outerHeight' - http://api.jquery.com/outerHeight/ – 2010-04-27 09:49:36

回答

5

我假設你的意思是文件的高度,而不是瀏覽器的高度。爲此,您可以使用類似以下內容:

$("#div2").height($(document).height() - 50); 

// or for more dynamicity 
$("#div2").height($(document).height() - $("#div1").height());  

如果你沒有瀏覽器的平均高度,而不是文件的高度,與$(window)替代$(document)

+0

Can您添加另一個元素以減去:$(「#div2」)。height($(document).height() - $(「#div1」) - $(「#div3」)。height()); – CLiown 2010-04-27 10:05:52

+0

@danit:如果你想,當然。只要你喜歡添加儘可能多的元素。確保你正在調用'height()'方法 - 例如。 '$(「#div2」)。height($(document).height() - $(「#div1」)。height() - $(「#div3」)。height());' – 2010-04-27 10:24:35

+0

Thanks,another題。文檔大小調整時可以調整大小#div2嗎?嘗試.resize但這是窗口而不是文件。 – CLiown 2010-04-27 10:31:37