Question

我正在使用AngularJS创建一个单页应用程序。

我只是尝试应用CSS样式，以便所有部分具有不同的背景颜色，但我希望颜色覆盖整个屏幕而不是仅覆盖屏幕的一部分。

使用plunker http://plnkr.co/edit/m0mhXbzg43tlzaiAg863?p=preview

更好地解释

我怎样才能做到这一点？非常感谢。

Answer 1

CSS高度在百分比中的工作方式是它将执行父元素高度的百分比，因此在您的情况下，父母的范围是＆＃39; ng-scope＆＃39;这就是为什么你的元素搜索＆＃39;给你一个100％高度的父元素（＆＃39; ng-scope＆＃39;），修复这个删除你的搜索元素周围的父，然后这将使用正文作为父，所以你可以这样此，

<强> CSS

body, html {
    width: 100%;
    height: 100%;
}

.search { height: 100%;}

希望有意义并帮助你！

修改

我只是，意识到你正在使用Angular所以在你的情况下，你可以简单地向你的父母添加一个这样的课程，

<强> HTML

<div class="full" ng-view></div>

<强> CSS

body, html { width: 100%; height: 100%; } .full { height: 100%;}

Answer 2

我在不久前发布了SO Question的答案，可能有助于您解决此问题。这是答案的plunker。

基本上，您创建一个提供程序，在应用程序运行时从$ routeProvider获取数据并更改当前路由，您将附加数据附加到when（）并在run（）上获取它并让提供程序根据指定的路线。

此外，您可以通过注入提供程序关联的服务在控制器中使用它。这是实现这一目标的一个小例子。请注意，bodyClass是一个可用于<body>类的类。

controller('HomeController', ['$scope', 'RouteData', function($scope, RouteData) {
  RouteData.set('bodyClass', 'Home');
}]);

，你的config（）应该是这样的。

config(function($routeProvider, RouteData) {
  RouteData.applyConfig({
  bodyClass: 'Home'
}); 

RouteData.hookToRootScope(true);

 $routeProvider.when('/home', {
   RouteData: {bodyClass: 'Home'},
   templateUrl: 'home.html',
   controller: 'HomeController'   
 });
});

HTML

<body ng-class="RouteData.get('bodyClass')">

AngularJS - 将全屏背景颜色应用于局部

2 个答案: