jquery mobile中设定content高度的两种方法
来源:互联网 发布:新东方网络英语 编辑:程序博客网 时间:2024/05/20 19:49
在使用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
- jquery mobile中设定content高度的两种方法
- jquery mobile content 高度
- 使用jquery获取网页中图片高度的两种方法
- 将jquery mobile的content区域的高度设置为100%
- VB 6.0 中打开 Connection 的两种方法,或称为设定 ConnectionString 的两种方法
- jQuery中获取高度的方法
- 去除jquery mobile的content和header之间的空白方法
- jquery mobile无法修改textarea的高度
- jquery mobile中为页面添加返回按钮的两种方式
- jquery mobile的两种页面跳转方式
- jQuery Mobile中jQuery.mobile.changePage方法使用详解
- VC中获取BMP图片高度与宽度的两种方法
- VC中获取BMP图片高度与宽度的两种方法
- Android中获取屏幕高度与宽度的两种方法
- 设定iframe的高度
- 引用了jquery mobile导致无法修改textarea的高度
- 动态设置ListView的高度的两种方法
- jQuery Mobile中$.mobile.buttonMarkup方法使用详解
- python_OpenCV_按键截取图片——按键
- Java中的多线程
- ue4 2游戏构架相关
- ListView之checkbox错位问题解决
- 压力测试工具
- jquery mobile中设定content高度的两种方法
- HashSet,和TreeSet的区别
- Storm TopologyBuilder
- 一维数组求平均数js
- 快速排序
- label标签
- iOS异常记录一
- [LeetCode]109. Convert Sorted List to Binary Search Tree
- LAMP环境的搭建