My current setup is as follows in a basic HTML file:
* {
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>Next, I attempt to incorporate AngularJS Routing by placing the section elements within a template named template.html like this:
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
I then include AngularJS, the ng-route dependencies, and the following script in the main file like so:
<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>
The scripting part functions correctly, but now the section elements no longer stretch to full height and appear like this.
I am facing an issue with this layout, and I need assistance on how to resolve it. My goal is to have certain div's or section's at least full screen height.
Thank you.