調整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>

來源

2014-11-23 Darwesh

這不是一個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

來源

2014-11-23 05:29:39

這是一個CSS問題，而不是一個角度問題。你的身體可能有100％的高度。將其設置爲

body { 
    height: auto; 
}

會解決它。

Documentation：

在根元素百分比高度是相對於包含塊初始。

來源

2016-08-27 12:58:16

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

回答

相關問題