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 Routing：section元素进入名为 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>

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

enter image description here

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

谢谢。

Answer 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%;
}

使用AngularJS路由时的min-height css问题

1 个答案: