ui-view 요소의 높이 조정 [Angular.js 각도 UI 라우터]

angular.js 및 angular-ui-router를 사용하고 있습니다. ui-view 요소의 높이에 약간의 문제가 있습니다. 뷰포트의 높이보다는 뷰 포트의 높이에 고정되어 있습니다. 내용이 동적으로 업데이트됨에 따라 내용의 높이가 변경되지만 상위 UI 뷰 요소의 내용은 그대로 유지됩니다. 따라서 body 요소의 높이도 UI보기의 높이와 동일하게 유지됩니다. 이 문제를ui-view 요소의 높이 조정 [Angular.js 각도 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

이것은 각도 문제는 아닙니다. CSS 문제입니다. CSS 규칙을 확인하십시오. – tyler

여러 옵션을 시도했지만 모두 헛되이입니다. 최소 높이를 100 %로 설정하는 것과 같습니다. 그 밖의 무엇을 시도해 볼 수 있습니다 .. – Darwesh

무슨 일인지 알기 위해 CSS를 게시해야합니다. 문제를 보여주는 jsfiddle이나 plunkr을 게시 할 수 있다면 많은 도움이 될 것입니다. – tyler

을 수용하고 어떻게 기본 레이아웃을 가진 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