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

【问题标题】：min-height css issue when using AngularJS Routing使用 AngularJS 路由时的最小高度 css 问题
【发布时间】：2015-09-27 08:27:09
【问题描述】：

我在一个简单的 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 或 section 的全屏高度。

谢谢。

【问题讨论】：

节元素是body的直接后代吗？
如您所见，在第一种情况下，它是，但在后一种情况下，它是 ng-view div 的后代。
给你的 <div data-ng-view> 高度 100%。它会工作

标签： css angularjs ngroute

【解决方案1】：

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

假设这个html：

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

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

#main{
  height: 100%;
}

你已经在 html,body 标签中设置了 100% 的高度，这很好。

所以，在你的情况下，像这样申请：

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

【讨论】：

它适用于第一种情况。但在后者中，我忘记将其添加到 ng-view div 中。现在可以了。
抱歉，您更新的问题不清楚。你能想象一下吗？
希望后一张图能帮到你。
嗯，在页脚添加 clear。 footer{clear: both;}
可能我没听懂。