时间戳

首页 > 解决方案 > CSS 不适用于 AngularJS 注入的 HTML

css - CSS 不适用于 AngularJS 注入的 HTML

问题描述

我对 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 类似乎不再适用于我的表单，现在表单显示在屏幕顶部。让我感到困惑的是，Bootstrap CSS 仍然可以正常工作。

style.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>

这是当前页面的样子： 页面截图

我希望让表单回到它所属的屏幕中间。

任何帮助将不胜感激。非常感谢你。

标签： cssangularjstwitter-bootstrap-3

解决方案

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

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

推荐阅读