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

Posted 2023-03-06

技术标签:

【中文标题】调整 ui-view 元素的高度[Angular.js Angular UI Router]【英文标题】：Adjusting the height of ui-view element[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，那么它将有很大帮助。 【参考方案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%。设置为