jquery mobile中设定content高度的两种方法

在使用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;
}

参考：

Solution to jQuery Mobile page content empty space height problem