Question

使用Angular.Js，我试图制作一个具有滚动效果的单页应用程序。我想要每个ng-inlcude部分...... <div class="viewport" ng-include="'views/file'" ng-controller="MainCtrl"></div>来填充视口。但是，它不是。

我在CSS中将html和body设置为100％，然后每个ng包含相同的内容。但是，我仍然无法使每个div填充视口。我不确定实际的父HTML和正文是否按大小百分比计算，因为逻辑是让孩子们按百分比填写父母。

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

Answer 1

您缺少结束标记：

#button {
  width: 121px;
  height: 41px;
} // <----- this one is not in yours.

Angularjs <div ng-include =“”>未填充垂直视口</div>

1 个答案: