使用 AngularJS 路由时的最小高度 css 问题

Question

我在一个简单的 html 文件中有以下配置：

* {
  box-sizing: border-box;
}

html, body {

  height: 100%;
  min-height: 100%;
  margin: 0;
}

section {
  display: block;
  width: 100%;
  min-height: 100%;
  padding: 1em
}

.b1 {
  background: #2AC56D
}
.b2 {
  background: #fae10c
}
.b3 {
  background: #03a9f4
}

<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>

然后我尝试按以下方式使用 AngularJS 路由：部分元素进入名为 template.html 的模板，如下所示：

<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>

然后我将 AngularJS、ng-route 依赖项和以下脚本添加到主文件中：

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: 'template.html'
    }).otherwise({
        redirectTo: '/'
    });
});
</script>
</head>
<body data-ng-app="app">
    <div data-ng-view>
    </div>
</body>

它正在处理脚本部分，但是 section 元素不再是全高，看起来像这样。

真正的问题是什么，更重要的是，我该如何纠正它？我真正需要的是至少有一些 div 或部分的全屏高度。

谢谢。

Answer 1

嗯嗯，要让height: 100%;正常工作，你还需要在它的父div中设置。

假设这样 html:

<div id="main">
  <section>1</section>
</div>

那么只在部分中应用 100% 高度是行不通的。您需要为父元素设置固定高度。所以，使用：

#main{
  height: 100%;
}

您已经在 html 中设置了 100% 的高度，这很好。

因此，对于您的情况，请这样申请：

div[data-ng-view]{
   height: 100%;
}

使用 AngularJS 路由时的最小高度 css 问题

min-height css issue when using AngularJS Routing

css

angularjs

ngroute