Question

我正在使用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>

Answer 1

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

body {
    height: auto;
}

会解决它。

Documentation：

根元素的百分比高度相对于初始包含块。

Answer 2

我创建了一个基本布局的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

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

2 个答案: