在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
具体实例页面请看
方法一：footer绝对定位-并加一层父元素
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
padding:0;
box-sizing: border-
html,body{
height: 100%;
/*min-height: 100%;*/
min-width: 1200
font: 14px/1.5 "Microsoft YaHei", sans-
color: #666666;
background: #e8e8e8;
min-height: 100%;
height:auto !
height:100%;//IE6不识别min-height
width: 100%;
background-color: #f1a899;
height: 64
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0
width: 1200
padding: 30px 0 145
.container{
background: #
height:500
bottom: 0;
height: 95
width: 100%;
background: #858B9A;
&div class="body"&
&div class="header"&
header页面头部
&div class="section"&
&div class="container"&
页面主体内容
&div class="footer"&
footer页面底部
方法二：foote绝对定位-以body为父元素
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
padding:0;
box-sizing: border-
height: 100%;
min-height: 100%;
min-width: 1200
font: 14px/1.5 "Microsoft YaHei", sans-
color: #666666;
background: #e8e8e8;
min-height:100%;
width: 100%;
background-color: #f1a899;
height: 64
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0
width: 1200
padding: 40px 0 140
.container{
background: #
height:500
bottom: 0;
height: 95
width: 100%;
background: #858B9A;
&div class="header"&
header页面头部
&div class="section"&
&div class="container"&
页面主体内容
&div class="footer"&
footer页面底部
方法三：footer加负值上边距
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
margin: 0;
padding: 0;
box-sizing: border-
html, body {
height: 100%;
min-height: 100%;
min-width: 1200
font: 14px/1.5 "Microsoft YaHei", sans-
color: #666666;
background: #e8e8e8;
width: 100%;
background-color: #f1a899;
height: 64
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0
.section {
min-height: 100%;
padding: 0 0 95
.container {
width: 1200
height: 500
margin: 30
background: #
height: 95
margin-top: -95
width: 100%;
background: #858B9A;
&div class="section"&
&div class="header"&
header页面头部
&div class="container"&
页面主体内容
&div class="footer"&
footer页面底部
方法四：给section的高度用calc(100vh-footer.height)
calc()：是css3新增方法，pc端大部分支持ie9+，移动端大部分不支持vh单位：相对于视窗的高度，视窗的高度是100vh
方法四用calc()函数算出高度，内容较少，小屏幕下如果出现横向滚动条，会影响纵向滚动条
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
margin: 0;
padding: 0;
box-sizing: border-
html, body {
height: 100%;
/*min-height: 100%;*/
min-width: 1200
font: 14px/1.5 "Microsoft YaHei", sans-
color: #666666;
background: #e8e8e8;
width: 100%;
background-color: #f1a899;
height: 64
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0
.section {
min-height: calc(100vh - 95px);
.container {
width: 1200
height: 500
background: #
height: 95
width: 100%;
background: #858B9A;
&div class="section"&
&div class="header"&
header页面头部
&div class="container"&
页面主体内容
&div class="footer"&
footer页面底部
方法五：用flexbox
flexbox对ie支持不太好
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
margin: 0;
padding: 0;
box-sizing: border-
height: 100%;
min-width: 1200
font: 14px/1.5 "Microsoft YaHei", sans-
color: #666666;
background: #e8e8e8;
min-height: 100%;
flex-direction:
width: 100%;
background-color: #f1a899;
height: 64
box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0
.section {
padding:30px 0;
.container {
width: 1200
height: 1000
background: #
height: 95
width: 100%;
background: #858B9A;
&div class="header"&
header页面头部
&div class="section"&
&div class="container"&
页面主体内容
&div class="footer"&
footer页面底部
0 收藏&&|&&2
你可能感兴趣的文章
2 收藏，788
15 收藏，818
4 收藏，2.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
高度不能是固定的，不然实际场景中不实用。最后一种方案，如果项目不用支持低版本IE是可以的。我还是老老实实用js实现效果吧。
高度不能是固定的，不然实际场景中不实用。
最后一种方案，如果项目不用支持低版本IE是可以的。
我还是老老实实用js实现效果吧。
分享到微博？
我要该，理由是：快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用}
编辑：www.fx114.net
本篇文章主要介绍了"快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用} "，主要涉及到快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用} 方面的内容，对于快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用} 感兴趣的同学可以参考一下。
*先运行第一个简单的APP，介绍Header,Content,Footer的使用
{2.1}运行一个简单的APP，效果如下
&
{2.2}Header代码
&
&ion-header-bar class="bar bar-header bar-positive"&
&h1 class="title"&页头&/h1&
&/ion-header-bar&
&
{2.3}Content代码
&
&ion-content&
&/ion-content&
&
{2.4}Footer代码
&ion-footer-bar class="bar bar-footer bar-positive"&
&h1 class="title"&页尾&/h1&
&/ion-footer-bar&
&
示例代码如下:
&
&!DOCTYPE html&
&html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&
&title&&/title&
&link href="lib/ionic/css/ionic.css" rel="stylesheet"&
&link href="css/style.css" rel="stylesheet"&
&!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
&link href="css/ionic.app.css" rel="stylesheet"&
&!-- ionic/angularjs js --&
&script src="lib/ionic/js/ionic.bundle.js"&&/script&
&!-- cordova script (this will be a 404 during development) --&
&script src="cordova.js"&&/script&
&!-- your app's js --&
&script src="js/app.js"&&/script&
&body ng-app="starter"&
&ion-side-menus&
&!-- Center content --&
&ion-side-menu-content&
&ion-header-bar class="bar bar-header bar-positive"&
&h1 class="title"&页头&/h1&
&/ion-header-bar&
&ion-content&
&/ion-content&
&ion-footer-bar class="bar bar-footer bar-positive"&
&h1 class="title"&页尾&/h1&
&/ion-footer-bar&
&/ion-side-menu-content&
&!-- Left menu --&
&ion-side-menu side="left"&
&ion-header-bar class="bar bar-footer bar-balanced"&
&h1 class="title"&边栏&/h1&
&/ion-header-bar&
&/ion-side-menu&
&/ion-side-menus&
&/body&
&/html&
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：ionic 教程
ionic 头部和底部
ion-header-bar
这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。
&ion-header-bar align-title="left" class="bar-positive"&
&div class="buttons"&
&button class="button" ng-click="doSomething()"&Left Button&/button&
&h1 class="title"&Title!&/h1&
&div class="buttons"&
&button class="button"&Right Button&/button&
&/ion-header-bar&
&ion-content&
Some content!
&/ion-content&
align-title
(optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll
(optional)
默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。
ion-footer-bar
知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-bar 是在屏幕的底部。
&ion-content&
Some content!
&/ion-content&
&ion-footer-bar align-title="left" class="bar-assertive"&
&div class="buttons"&
&button class="button"&Left Button&/button&
&h1 class="title"&Title!&/h1&
&div class="buttons" ng-click="doSomething()"&
&button class="button"&Right Button&/button&
&/ion-footer-bar&
与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。
align-title
(optional)
这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
记住登录状态
重复输入密码在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的页面中有一个nav-view，下面有个ion-footer-bar，是主导航。但是现在有些页面，不需要这个footer-bar。我尝试在$rootScope.showFooterBar中控制，
.factory('ShowFooterBar',[function(){
body的controller:
$rootScope.showFooterBar=ShowFooterB
在需要footer-bar的controller内：
$rootScope.showFooterBar.show=
不需要footer的：
$rootScope.showFooterBar.show=
在第一次加载的时候，是显示footer的，跳转到不需要footer的页面也是正常的。但是，如果从没有footer的页面使用 ion-nav-back-button 返回到有footer的页面的时候，footer是不显示的。console.log显示showFooterBar.show是false不知道我哪里设置的不对？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
ionic 会默认缓存viewstate，可以通过在配置state的时候，设置cache: false
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Ionic 常见问题及解决方案 - 简书
Ionic 常见问题及解决方案
在Ionic开发过程中会遇到很多常见的开发问题，分享一下笔者在开发过程中总结到的对这些问题的解决方案。也是接触ionic没多久，大家一起努力,有问题欢迎评论指出 :)ps: 附上博客的
一些常识与技巧
list 有延迟，可以在ion-content处使用 overflow-scroll="true"尝试
在&i&上用ng-click上是没效果的
&label&标签内的事件会在整个label内被触发，点哪都触发
快捷修改背景色style="background-color: #212326;"
能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高
直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div
可以用ng-class="{'important': post.important}"配合css 根据列表元素显示不同的效果
获取日期用$filter，var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
列表中的元素不能写成 id : 4，应写成 id : "4",注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+"";
使用$log进行log输出,为什么用$log而不是console.log呢？可以看看
在安卓上的体验比较差，动画有延迟？可以试试
controllers和services 的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService
[如何在某个界面中去掉导航栏?]
[如何在ionic中加载本地图片?]
[如何在ionic中嵌入网页代码?]
[如何将template加载到某个tab或某个sidemenu项目下?]
[用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?]
[加载页面的时候会看到双括号一闪而过？]
[更新了数据，如何让界面更新呢？]
[如何实现IonicView中card上面有一列分割线的效果?]
[controller.js和service.js文件越来越大怎么办?]
[如何寻找优秀的范例代码?]
[如何显示相对时间？]
[发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?]
[如何在列表右下方添加时间等信息?]
[如何回到上一页面?]
[如何关闭应用?]
[在安卓设备上如何让title居中?]
[如何让在sidemenu中的headerbar能够显示头像等其他信息?]
[ionic的subheader挡住了内容区域怎么办?]
[对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?]
[ionic如何处理回退按钮？例如询问用户是否真的要退出应用]
[ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?]
[ionic如何实现搜索框内的全部清除按钮?]
如何在某个界面中去掉导航栏?
如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加hide-nav-bar="true"
如何在ionic中加载本地图片?
对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：
.login-page {
background:url(../img/signup_bg.png);
background-size:
background-repeat: no-
但是对于在页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：
&img src="img/commander.jpg"&
如何在ionic中嵌入网页代码?
使用ng-bind-html这个类,不过它会过滤原始html的标签，我们可以引入$sce模块，用$sce.trustAsHtml()方法信任我们获取的网页
如何将template加载到某个tab或某个sidemenu项目下?
&ion-nav-view name="menuContent"&
可以指定name，然后在子状态中使用该name，ionic就知道该把该状态的template渲染到哪边了。例如：
// signup page
.state('auth.signup', {
url: '/signup',
'auth-signup': {
templateUrl: 'templates/auth-signup.html',
controller: 'SignUpCtrl'
另有一个tabs中声明该auth-signup:
&ion-tab title="Sign Up" icon-on="ion-ios-personadd"
icon-off="ion-ios-personadd-outline" href="#/auth/signup"&
&ion-nav-view name="auth-signup"&&/ion-nav-view&
&/ion-tab&
运行serve命令时ionic报错?
ionic $ An uncaught exception occured and has been reported to Ionic
看看你是不还有一个终端在运行着serve呢？
用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?
可以用ionic serve -all的方法解决
加载页面的时候会看到双括号一闪而过？
angularjs 在使用双括号的时候，第一个加载的页面，也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用ng-bind。
ng-bind使用方式如下: &p ng-bind="greeting"&&/p&
更新了数据，如何让界面更新呢？
可以用广播，注意
如何实现IonicView中card上面有一列分割线的效果?
在css里定义
#info-up {
border-top: 4px solid #f06336;
controller.js和service.js文件越来越大怎么办?
所有的控制器不必都放在controllers.js这一个文件中，可以新建controllers文件夹，然后把每个controller都建一个&controller&.js文件，同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖，第一个加载的js中模块中要加[...],其他都不需要。如：
// File : /js/directives/mainDirective.js
angular.module('app.directives',[]);
// File : /js/directives/myGreatDirective.js
angular.module('app.directives')
.directive('myGreatDirective', function(){
// File : /js/directives/myBetterDirective.js
angular.module('app.directives')
.directive('myBetterDirective', function(){
看了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把[]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：
angular.module('fcws.controllers',['ionic', 'fcws.services']);
angular.module('fcws.services', []);
可以达到和上面一样的效果，而且可以统一管理.
如何寻找优秀的范例代码?
目前有些ionic 的app没有进行代码混淆，至少ionic官方的ionic view没有进行代码混淆，下载他们的app，文件名改成zip，解压，所有的 www文件都在assets文件夹中，相当于开源了有木有，看看那些最优秀的practice。看中哪些优秀的app，下下来,如何在googleplay上下载？把googleplay应用的地址贴到中。
如何显示相对时间？
如几分钟前，几天前等,，看
发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?
暂时的解决方法是，不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:
lintOptions {
disable 'MissingTranslation'
disable 'ExtraTranslation'
如何在列表右下方添加时间等信息?
span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:
&ion-item class="item item-avatar-left " ng-repeat="message in messages"&
&img src="../../img/commander.jpg"&
&span class="item-note"&{{message.create_at}}&/span&
&h2 &{{message.name}}&/h2&
{{message.content}}&/p&
&/ion-item &
如何回到上一页面?
用$ionicHistory这个模块,引入该模块后使用goBack([backCount])，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1
如何关闭应用?
ionic.Platform.exitApp();
在安卓设备上如何让title居中?
在headerbar中添加align-title="center",如:
&ion-header-bar class="bar-positive" align-title="center"&
&h1 class="title"&{{username}}&/h1&
&/ion-header-bar&
不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
如果要让某一个view title居中，可以用$ionicNavBarDelegate，参考
如何让在sidemenu中的headerbar能够显示头像等其他信息?
解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:
&ion-side-menu side="left"&
&ion-content class="bar-positive"&
&ion-list&
&ion-item class="item item-avatar item-positive" href="#"&
&img src="img/commander.jpg"&
&h2 class=" light"&
&i class="icon ion-ios-star"&&/i&{{title}}
&a&{{username}}&/a&
&/ion-item&
ionic的subheader挡住了内容区域怎么办?
解决方案是给&ion-content&加类has-subheader,同理也可以加has-header。如下:
&ion-content class="has-header has-subheader"&
对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖
ionic如何处理回退按钮？例如询问用户是否真的要退出应用
可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。
$ionicPlatform.registerBackButtonAction(function(e) {
var current_state_name = $state.current.
if(current_state_name !== 'sidemenu.post'
&& current_state_name !== 'sidemenu.contact_town' &&
current_state_name !== 'sidemenu.contact_people'){
$ionicPopup.confirm({
title: '退出应用',
template: '您确定要退出xxxx吗?'
}).then(function (res) {
if (res) {
//ionic.Platform.exitApp();
navigator.app.exitApp();
console.log('You are not sure');
e.preventDefault();
navigator.app.backHistory();
ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
在应用的注册或者登录部分，不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时，你需要把这个token放在头部中。你可以在app.js的.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401或403，跳转到重新登录页面.
$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
'request': function (config) {
config.headers = config.headers || {};
if (User.getToken()) {
config.headers.Authorization = 'Bearer ' + User.getToken();
'responseError': function (response) {
if (response.status === 401 || response.status === 403) {
//如果之前登陆过
if (User.getToken()) {
$rootScope.$broadcast('unAuthenticed');
return $q.reject(response);
ionic如何实现搜索框内的全部清除按钮?
在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行:
&span class="item-input-wrapper"&
&i class="icon ion-ios-search placeholder-icon"&&/i&
&input type="search" placeholder="请输入姓名前缀" ng-model="search.key"&
&i class="icon ion-close-circled placeholder-icon" style="vertical-align:"
on-tap="clearSearch()" ng-if="search.key.length"&&/i&
轻度强迫症
Nodejs实习生
关注hybird app
主要语言:java,js