在使用jquerymobile開發時會遇到這樣一個需求：If header and footer arefixed you would think that content covers rest of available space

預設情況下：Emptycontent div height is 0 and it will stretch vertically only to cover its inner(child) content.

解決方案有兩種：

1. 純CSS方案

we can forcecontent div to resize according to available space even before pageshow event.This can be done with this CSS rules

#content {
    padding: 0;
    position: absolute !important; 
    top : 45px !important;  
    right : 0; 
    bottom : 45px !important;  
    left : 0 !important;     
}

This CSS willremove classic content padding and absolutely position content div to cover allavailable space, giving only some space to a page header. Bottom rule can bechanged to 40px in case footer is also needed. Keyword !important is alsoneeded because we want to enforce new values over old ones.

2. CSS+Javascript方法

calculateavailable content height. It can be then used to dynamically set new contentheight. That combined with window resize event will give you bestresponsiveness.

css

#content {
    padding: 0;  
}

javascript

function getRealContentHeight() {
	var header = $.mobile.activePage.find("div[data-role='header']:visible");
	var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
	var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
	var viewport_height = $(window).height();

	var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
	if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
		content_height -= (content.outerHeight() - content.height());
	} 
	return content_height;
}