调整 ui-view 元素的高度[Angular.js Angular UI Router]答案

【问题标题】：Adjusting the height of ui-view element[Angular.js Angular UI Router]调整 ui-view 元素的高度[Angular.js Angular UI Router]
【发布时间】：2015-01-20 22:44:18
【问题描述】：

我正在使用 angular.js 和 angular-ui-router。 ui-view 元素的高度有一点问题。它被固定到视口的高度而不是它的内容。随着内容的动态更新，内容的高度会发生变化，但父 ui-view 元素的高度保持不变。因此，body 元素的高度也与 ui-view 的高度保持不变。如何解决这个问题

<body> 
    <div ui-view>
        <div id = "content"> 
            <!-- Some content with height more then that of view-port -->
        </div>
    </div>
</body>

【问题讨论】：

这不是 angularjs 问题；这是一个CSS问题。检查您的 CSS 规则。
我尝试了多种选择，但都徒劳无功..比如将最小高度设置为 100%。我还能尝试什么..
您必须发布您的 css 以便我们了解发生了什么。如果您可以发布一个显示问题的 jsfiddle 或 plunkr，那么它将有很大帮助。

标签： html css angularjs angular-ui-router

【解决方案1】：

我创建了一个带有基本布局的example。它应该显示或给出一些答案如何使用 UI-Router、HTML 和 CSS。布局的思路是：

固定顶栏
固定左栏
动态中心区

inte index.html <div ui-view=""></div> 我们注入 layout.tpl：

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

这些是样式：

.top { background: #bcd;
position: absolute; height: 100px; width: auto; left: 0; right: 0; top: 0; bottom: auto;
}
.middle {
position: absolute; height: auto; width: auto; left: 0; right: 0; top: 100px; bottom: 0;
}
.left { background: #def;
position: absolute; height: auto; width: 200px; left: 0; right: auto; top: 0; bottom: 0;
}
.main { 
position: absolute; height: auto; width: auto; left: 200px; right: 0; top: 0; bottom: 0;
}

这些是states 这个简单的应用程序：

$stateProvider
.state('app', {
    url: '/app',
    views: {
      '@' : {
        templateUrl: 'layout.html',
      },
      'top@app' : { templateUrl: 'tpl.top.html',},
      'left@app' : { templateUrl: 'tpl.left.html',},
      'main@app' : { templateUrl: 'tpl.main.html',},
    },
  })
.state('app.list', {
    url: '/list',
    templateUrl: 'list.html',
  })
.state('app.list.detail', {
    url: '/:id',
    views: {
      'detail@app' : {
        templateUrl: 'detail.html',
        controller: 'DetailCtrl'
      },
    },
  })

查看here

【讨论】：

【解决方案2】：

这是一个 CSS 问题，而不是 Angular 问题。您的身体可能将高度设置为 100%。设置为

body {
    height: auto;
}

会解决的。

Documentation：

根元素上的百分比高度是相对于 initial 包含块的。

【讨论】：