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

最新推荐文章于 2022-07-21 15:55:12 发布

翻译最新推荐文章于 2022-07-21 15:55:12 发布 · 2.4k 阅读

jquery mobile 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了两种解决jQuery Mobile中内容区域高度不占满剩余空间的方法：一是通过纯CSS实现内容区域占据可用空间；二是结合CSS与JavaScript动态计算并设置内容高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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