My goal is to create a single-page app with a scrolling effect using Angular.Js. Each ng-include section within the
<div class="viewport" ng-include="'views/file'" ng-controller="MainCtrl"></div>I have set the html and body to 100% in CSS, and applied the same to each ng-include element. Despite this, I am unable to make each div fill the viewport as intended. I suspect that the parent HTML and body elements are not being sized properly in percentage, as the logic dictates that the children should fill their parent percentage-wise.
<body ng-app="myappApp">
<div id="sidebar-back-drop"></div>
<div class="row">
<div id="sidebar-bar-static" class="col-xs-2">
<a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse">Home</a>
<a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse">Weather</a>
<a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse">Stocks</a>
<a href="#fakelink" id="button" class="btn btn-block btn-md btn-inverse">News</a>
</div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="viewport" ng-include="'views/home.html'" ng-controller="MainCtrl"></div>
<div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"></div>
<div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"></div>
<div class="viewport" ng-include="'views/first.html'" ng-controller="MainCtrl"></div>
</div>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
CSS:
html {
height: 100% !important;
width: 100%;
margin: 0px;
}
body {
background-color: #f39c12;
overflow: hidden;
height: 100% !important;
}
#title {
}
#sidebar-bar-static {
margin-left: 25px;
position: fixed;
color: #1abc9c #34495e;
}
#sidebar-back-drop {
margin-left: 12px;
margin-top: 10px;
width: 124px;
height: 181px;
position: fixed;
background-color: #1abc9c;
border-radius: 6px;
}
#button {
width: 121px;
height: 41px;
}
.viewport {
height: 100% !important;
}