Html 设置内容高度 100% jquery mobile
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21552308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set content height 100% jquery mobile
提问by ddw147
I am developing jQuery Mobile page in which my CSS is
我正在开发我的 CSS 所在的 jQuery Mobile 页面
.ui-content {
background: transparent url('./images/bg.jpg');
background-size : 100% 100%;
min-height: 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
but page displays like this
但页面显示是这样的
I don't want that empty space between content and footer content height till the footer
我不希望内容和页脚内容高度之间的空白空间直到页脚
回答by Omar
Update
更新
I have added a Pure CSS Solutionbelow.
我在下面添加了一个纯 CSS 解决方案。
I have noticed that .ui-contentdiv doesn't fill the empty space 100%, it is still missing 2px. Those comes from fixedtoolbars headerand footer, as they have margin-top: -1pxand margin-bottom: -1pxrespectively. (fiddle)
我注意到.ui-contentdiv 没有 100% 填充空白空间，它仍然缺失2px。这些来自固定的工具栏header和footer，因为它们分别具有margin-top: -1px和margin-bottom: -1px。（小提琴）
It wasn't obvious before as both page divand footerhave the same black data-theme="b". I have changed .ui-page's background-color: red;to show the difference.
之前并不明显，因为页面 div和页脚都具有相同的 black data-theme="b"。我已更改.ui-page'sbackground-color: red;以显示差异。
Therefore, to achieve best results, it's necessary to check whether toolbarsare fixed. Below is the enhancedsolution.
因此，要达到最佳效果，必须检查工具栏是否固定。下面是增强的解决方案。
jQM >= 1.3
jQM >= 1.3
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
/* content div has padding of 1em = 16px (32px top+bottom). This step
can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
jQM <= 1.2
jQM <= 1.2
Since fixedtoolbars in jQuery Mobile 1.2 and below don't get -1for top/ bottom, there is no need to do subtract 1pxfrom toolbar's .outerHeight().
由于固定在jQuery Mobile的1.2及以下工具栏没有得到-1为top/ bottom，就没有必要做减去1px从工具栏上的.outerHeight()。
var header = $(".ui-header").outerHeight();
var footer = $(".ui-footer").outerHeight();
Demo- w/ fixed toolbars
Demo- w/o fixed toolbars (1)
演示- 带固定工具栏
演示- 不带固定工具栏(1)
(1)On Desktop browser page will scroll by 1px; however, On mobile device it doesn't. It's caused by body's height set to 99.9%and .ui-pageto 100%.
(1)在桌面浏览器页面将滚动 1px；但是，在移动设备上却没有。这是由body的高度设置为99.9%和.ui-page引起的100%。
回答by ezanker
This is just to add a couple of points to @Omar's answer.
这只是为@Omar 的回答添加几点。
His updated FIDDLE
他更新的小提琴
Put his scaling code inside a function and add scroll(0,0) to the top. This eliminates weird issues that can come up during orientation changes (portrait to landscape) on some devices.
将他的缩放代码放在一个函数中，并将 scroll(0,0) 添加到顶部。这消除了在某些设备上的方向更改（纵向到横向）期间可能出现的奇怪问题。
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
The function should then be called on pagecontainershow (pageshow if jQM 1.3) and you should add a handler for window resize and orientationchange to keep the content properly sized when the viewport size changes:
然后应该在 pagecontainershow 上调用该函数（如果是 jQM 1.3，则为 pageshow），并且您应该为窗口调整大小和方向更改添加一个处理程序，以在视口大小更改时保持内容大小正确：
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
});
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
});
回答by Omar
Pure CSS solution
纯 CSS 解决方案
Important note:Use this solution for specific pages, where you don't want page or page's content to scroll vertically. Because page's
heightwill set to100%, hence, it won't scroll and you will face this problem.
重要说明：将此解决方案用于您不希望页面或页面内容垂直滚动的特定页面。因为页面
height将设置为100%，因此，它不会滚动，您将面临这个问题。
Full Screen:
html, body, #pageID { /* specify page */ height: 100%; margin: 0; padding: 0; } #pageID .ui-content { padding: 0; } .ui-content, .ui-content #full-height-div { /* divs will inherit page's height */ height: inherit; }
全屏：
html, body, #pageID { /* specify page */ height: 100%; margin: 0; padding: 0; } #pageID .ui-content { padding: 0; } .ui-content, .ui-content #full-height-div { /* divs will inherit page's height */ height: inherit; }
Fixed Toolbars (header/footer):
html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: inherit; /* inherit height without padding nor border */ }
固定工具栏（页眉/页脚）：
html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: inherit; /* inherit height without padding nor border */ }
Floating Toolbars:
html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: calc(100% - 89px); /* 88px = header's height 44px and footer's 44px plus 1px */ }
浮动工具栏：
html, body, #pageID { height: 100%; margin: 0; padding: 0; } #pageID, #pageID * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageID .ui-content { height: calc(100% - 89px); /* 88px = header's height 44px and footer's 44px plus 1px */ }
回答by nunoarruda
You can achieve "height 100%" with CSS only. Add the following to your ui-content selector:
您只能使用 CSS 实现“高度 100%”。将以下内容添加到您的 ui-content 选择器中：
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
Tested on jQuery Mobile v1.4.3
在 jQuery Mobile v1.4.3 上测试
回答by aotian16
I change @ezanker 's answer.
我改变了@ezanker 的答案。
It works, but if I have two pages, page 2 will resize when I go to page 2 from page 1.
它有效，但如果我有两页，当我从第 1 页转到第 2 页时，第 2 页将调整大小。
And if I change event pagecontainershowto pagecontainerbeforeshow, it does not work correctly.
如果我将 event 更改pagecontainershow为pagecontainerbeforeshow，它将无法正常工作。
I debug and find height of header or footer is wrong before show.
我调试并发现页眉或页脚的高度在显示之前是错误的。
code
代码
function ScaleContentToDevice(nextPage){
var screen = $.mobile.getScreenHeight();
var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
var content = screen - header - footer - contentCurrent;
nextPage.children(".ui-content").height(content);
}
$(document).on( "pagecontainershow", function(event, ui){
var nextPage = $(ui.toPage[0]);
ScaleContentToDevice(nextPage);
});
回答by ppetree
the simple answer isn't in resizing the content div but in changing the background color of the active page like this...
简单的答案不是调整内容 div 的大小，而是像这样更改活动页面的背景颜色......
.ui-page-active {background: #f1f1f1; }
...to match the color of the ui-content and all of a sudden the problem goes away.
...匹配 ui 内容的颜色，突然间问题就消失了。
回答by Tripex
With pure CSS works fine for portrait pages. You must set top and bottom position depending of your header and footer height
使用纯 CSS 可以很好地处理纵向页面。您必须根据页眉和页脚的高度设置顶部和底部位置
position: absolute;
top: 88px; /*your header height*/
right: 0;
bottom: 44px; /*your footer height */
left: 0;
background: white;
回答by Kinoli
position: fixed;
height: 100%;
will do it!
会做的！
