本篇文章主要介绍了angularjs 页面自适应高度的方法，现在分享给大家，也给大家做个参考。
需求
在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。
实现方案
在ui-view所在的p添加directive，directive中通过element.css初始化计算p的高度，动态更新p高度
directive监听（$$watch)angular的$digest，实时获取body高度，动态赋值model或element.css改变
方案1：添加directive和element.css自适应高度
1.创建directive
define([ "app" ], function(app) { app.directive('autoheight',function ($window) { return { restrict : 'a', scope : {}, link : function($scope, element, attrs) { var winowheight = $window.innerheight; //获取窗口高度 var headerheight = 80; var footerheight = 20; element.css('min-height', (winowheight - headerheight - footerheight) + 'px'); } }; }); return app;});
2.p元素添加directive
<p ui-view auto-height></p>
3.效果图
原界面：右侧区域的高度为自适应内容，导致下方存在黑色的背景色
调整后：右侧区域的高度自适应浏览器
方案2：$watch监听body高度，赋值改变高度
1.创建resize directive
var app = angular.module('miniapp', []);function appcontroller($scope) { /* logic goes here */}app.directive('resize', function ($window) { return function (scope, element) { var w = angular.element($window); scope.getwindowdimensions = function () { return { 'h': w.height(), 'w': w.width() }; }; scope.$watch(scope.getwindowdimensions, function (newvalue, oldvalue) { scope.windowheight = newvalue.h; scope.windowwidth = newvalue.w; scope.style = function () { return { 'height': (newvalue.h - 100) + 'px', 'width': (newvalue.w - 100) + 'px' }; }; }, true); w.bind('resize', function () { scope.$apply(); }); }})
2.在p元素上增加resize directive
<p ng-app="miniapp" ng-controller="appcontroller" ng-style="style()" resize> window.height: {{windowheight}} <br /> window.width: {{windowwidth}} <br /></p>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用jquery+css3如何实现熊猫tv导航
在jquery中如何实现定时隐藏对话框
详细解读vue-admin和后端(flask)分离结合
在vue中设置背景图片
使用vue + less如何实现简单换肤功能
使用angular、react和vue如何实现相同的面试题组件
以上就是angularjs中如何实现页面自适应？的详细内容。