jQuery mobile Panel的页眉和页脚高度差
弗雷德·J。
在jQuery Mobile 1.4.5中，访问面板的演示在左侧显示下图，但是当我复制代码并在同一浏览器中运行它时，在右侧获得下图。
请注意页眉和页脚的高度差。
我试图包括my.css并重置html＆body无济于事。我想不出任何其他信息来包含在这里。
如何解决？谢谢
根据要求，这是来自google chrome元素检查面板的CSS：
.ui-header .ui-title, .ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}
user agent stylesheeth1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Inherited from header.ui-header.ui-bar-inherit.ui-header-fixed.slidedown
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
background-color: #e9e9e9 /*{a-bar-background-color}*/;
border-color: #ddd /*{a-bar-border}*/;
color: #333 /*{a-bar-color}*/;
text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #eee /*{a-bar-shadow-color}*/;
font-weight: bold;
}
Inherited from div.ui-page.ui-page-theme-a.ui-page-header-fixed.ui-page-footer-fixed.ui-page-active
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
background-color: #f9f9f9 /*{a-page-background-color}*/;
border-color: #bbb /*{a-page-border}*/;
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
Inherited from body.ui-mobile-viewport.ui-overlay-a
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
background-color: #f9f9f9 /*{a-page-background-color}*/;
border-color: #bbb /*{a-page-border}*/;
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
body, input, select, textarea, button, .ui-btn {
font-size: 1em;
line-height: 1.3;
font-family: sans-serif /*{global-font-family}*/;
}
Inherited from html.ui-mobile
html {
font-size: 100%;
}这是产生错误的整个文件，请调整head标签中“ public”库的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<!-- <link rel="stylesheet" href="css/default.css"/> -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" id="panel-fixed-page1" data-title="Panel fixed positioning" data-url="panel-fixed-page1">
<div data-role="header" data-position="fixed">
<h1>Fixed header</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel fixed positioning</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p>
<p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>
<div data-demo-html="#panel-fixed-page1"></div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
<a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>We made the page a bit longer because you only see the panel fixed positioning if you can scroll the page :-)</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Fixed footer</h4>
</div><!-- /footer -->
<div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
<li><a href="#panel-fixed-page2">Dialogs</a></li>
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
<li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
<li><a href="#panel-fixed-page2">Footer toolbar</a></li>
<li><a href="#panel-fixed-page2">Form elements</a></li>
<li><a href="#panel-fixed-page2">Grids</a></li>
<li><a href="#panel-fixed-page2">Header toolbar</a></li>
<li><a href="#panel-fixed-page2">Icons</a></li>
<li><a href="#panel-fixed-page2">Links</a></li>
<li><a href="#panel-fixed-page2">Listviews</a></li>
<li><a href="#panel-fixed-page2">Loader overlay</a></li>
<li><a href="#panel-fixed-page2">Navbar</a></li>
<li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
<li><a href="#panel-fixed-page2">Pages</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Popup</a></li>
<li><a href="#panel-fixed-page2">Radio buttons</a></li>
<li><a href="#panel-fixed-page2">Select</a></li>
<li><a href="#panel-fixed-page2">Slider, single</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
<li><a href="#panel-fixed-page2">Transitions</a></li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
<div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
</div>
</form>
</div><!-- /panel -->
</div>
</body>
</html> 塔索斯
页眉和页脚标题css如下
.ui-header .ui-title, .ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0!important;
}
填充是 padding: .7em 0;
任何更大的东西 padding: 2em 0;
会给你这个
因此，请检查您的CSS并确保填充为 padding: .7em 0;
更新
我.ui-header .ui-title, .ui-footer .ui-title在您的Q中看不到CSS
确保鼠标指针直接位于标题标题文本上，而不是标题本身。您应该看到类似这样的内容，而不是您在问题中添加的那堆其他CSS代码。你看到了吗，还是丢失了？
作为测试，在文档的末尾添加以下内容以查看是否有帮助
<HEAD>
...
...
...
<style>
.ui-header .ui-title, .ui-footer .ui-title {
padding: .7em 0 !important;
}
</style>
<HEAD>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在jQuery Mobile中动态添加页脚或页眉
- 2
停止页眉页脚从松动的位置：单击固定-Jquery Mobile
- 3
jQuery mobile：更改文本页眉/页脚删除固定属性
- 4
jQuery Mobile和PHP
- 5
Jsonp和jQuery Mobile
- 6
jQuery Mobile Panel样式问题
- 7
如何使Kendo网格在JQuery UI对话框内的页眉和页脚之间填充100％的高度？
- 8
jQuery Mobile和DateBox的问题
- 9
jQuery Mobile和DateBox的问题
- 10
jQuery Mobile和link_to
- 11
Highcharts和jQuery Mobile Pages
- 12
页眉和页脚之间的jQuery移动面板
- 13
结合使用jQuery Mobile和jQuery Steps
- 14
jQuery Mobile和Ajax Panel无法正确打开
- 15
jQuery Mobile Panel打开操作之前
- 16
jQuery Mobile Panel无法正常运行
- 17
jQuery Mobile Panel导航冻结/挂起
- 18
jQuery Mobile Panel打开时隐藏flexslider
- 19
避免通过jQuery Mobile添加最小高度
- 20
iOS 7的jQuery Mobile内容高度问题
- 21
设置内容高度100％jQuery mobile
- 22
设置内容高度100％jQuery mobile
- 23
点击列表时jQuery Mobile的动画高度
- 24
如何减少jQuery mobile中面板的高度
- 25
iOS 7的jQuery Mobile内容高度问题
- 26
jQuery Mobile工具栏的高度
- 27
如何使用jQuery Mobile同步setTimeout和mobile.navigate？
- 28
jQuery Mobile重用标题和导航
- 29
如何启用和禁用selectmenu JQuery mobile
我来说两句