CSS 未应用于 AngularJS 已注入 HTML

Question

我是 AngularJS 的新手，正在尝试构建一个简单的登录页面。早些时候，我在 index.html 中有我的 CSS 和 HTML，在 app.js 中有我的 angular js 代码。 CSS 在 head 部分用 'style' 标签定义，我的表单在 body 部分，angular 代码作为脚本包含在内。表格如我所愿地显示出来，出现在屏幕中间。我还包括 bootstrap.css 作为样式表。

然后我将 CSS (styles.css)、HTML (index.html) 和 angularjs (app.js) 分成三个文件，并尝试使用 routeProvider 将它们粘合在一起。但是，我定义的 .wrapper CSS class 似乎不再适用于我的表单，现在表单显示在屏幕顶部。令我困惑的是 Bootstrap CSS 仍然正常工作。

styles.css和app.js都包含在HTML中，HTML的形式是通过routeProvider注入的。

我不确定哪里出错了；一个快速的 f12 显示样式存在，但是 CSS 没有按照我想要的方式显示。

这是我的 styles.css:

html {
  height:100%
}
body {
  height: 100%;
  background-image: url('images/calm-background.jpg');
  background-size: 100% 100%;
}
.wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-f-border {
  border-style: ridge;
  background-color: white;
  padding-bottom: 15px;
  border-radius: 5px;
}

这是我的 form.html:

<div ng-app="app">
  <div class="wrapper">
    <div class="container">
      <div class="row center-block">
        <div class="col-sm-4">
          <!-- Empty div for centering purposes -->
        </div>
        <div class="col-sm-4 form-f-border">
          <div class="text-center">
            <h2>Log In</h2>
          </div>
          <form>
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username-input">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password-input">
            </div>
            <div class="text-center">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <div class="col-sm-4">
          <!-- Empty div for centering purposes -->
        </div>
      </div>
    </div>
  </div>
</div>

这是我的 app.js:

var app = angular.module('app', [
  'ngRoute'
]);

app.config(function($routeProvider) {
  $routeProvider
    .when( '/', {
      templateUrl: 'form.html',
      controller: 'formController',
    })
    .otherwise({
      redirectTo: '/'
    });
});

app.controller('formController', function($scope) {

});

这是我的 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="styles.css">
    <script src="angular/angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-app="app">
      <ng-view></ng-view>
    </div>
  </body>
</html>

这是当前页面的样子：

我希望将表单返回到屏幕中间，它所属的位置。

如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

看来我从另一个 post 找到了答案：Set div height equal to screen size

原来我需要将 100% 更改为 100vh，它使用 100% 的当前视图。

CSS 未应用于 AngularJS 已注入 HTML

CSS Not Applying to AngularJS Injected HTML

css

angularjs

twitter-bootstrap-3