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

问题描述：

我正在使用angular.js和angular-ui-router。 ui-view元素的高度有一点问题。它固定在视图端口的高度，而不是其内容。当内容动态更新时，内容的高度发生变化，但父UI元素的高度保持不变。由此，主体元素的高度也与ui-view的高度保持一致。如何解决这个问题调整ui-view元素的高度[Angular.js Angular UI路由器]

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

这不是一个angularjs问题;这是一个CSS问题。检查你的CSS规则。 – tyler 2014-11-23 00:41:18

我试过多个选项，但都是徒劳的..就像将最小高度设置为100％一样。我还有什么可以尝试.. – Darwesh 2014-11-23 00:47:58

你必须发布你的CSS让我们知道发生了什么。如果你可以发布一个显示问题的jsfiddle或plunkr，那么它会有很大的帮助。 – tyler 2014-11-23 00:53:03

答

我创建了一个基本布局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', 
     }, 
     '[email protected]' : { templateUrl: 'tpl.top.html',}, 
     '[email protected]' : { templateUrl: 'tpl.left.html',}, 
     '[email protected]' : { templateUrl: 'tpl.main.html',}, 
    }, 
    }) 
.state('app.list', { 
    url: '/list', 
    templateUrl: 'list.html', 
    }) 
.state('app.list.detail', { 
    url: '/:id', 
    views: { 
     '[email protected]' : { 
     templateUrl: 'detail.html', 
     controller: 'DetailCtrl' 
     }, 
    }, 
    })

检查它here

答

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

body { 
    height: auto; 
}

会解决它。

Documentation：

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

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

相关推荐