ng-show изменяет минимальную высоту в div

Question

У меня есть div, который имеет класс wrapper. Внутри он имеет родительский div с классом content-wrapper. У wrapper div есть ng-show, который возвращает true/false.

<div class="wrapper" ng-show="firebaseUser"> 
    <% include ../partials/nav.ejs %> 
    <div class="content-wrapper"> 
     <ng-view></ng-view> 
    </div> 
    <% include ../partials/footer.ejs %> 
</div> 

content-wrapper имеет только немного CSS, что делает его пригодным весь экран. На всякий случай это поможет мне включить родительские стили.

.wrapper { 
    min-height: 100%; 
    position: relative; 
    overflow: hidden; 
} 

.content-wrapper, .right-side { 
    min-height: 100%; 
    background-color: #ecf0f5; 
    z-index: 800; 
} 

Теперь, когда я использую ng-show на экране прокручивается дальше, чем высота окна.

Если я проверяю (а затем обновляю страницу), то он (.content-wrapper) выглядит как на странице загрузки, дается стиль min-height: 532px;.

Если я проверяю страницу без обновления страницы. Это означает, что он перестраивается на новую высоту окна, ему задан стиль min-height: 422px;.

Если я не использую ng-show, экран всегда подходит для окна, и у меня нет проблем.

Что такое настройка ng-show и как исправить эту проблему?

P.S. Я попытался использовать ng-if вместо этого, и результат этого всего экрана очень короткий и маленький. Так, хуже, чем ng-show.

Answer 1

Это просто не способ работать с угловыми. Настоятельно рекомендуем прочитать Thinking in angular when I have a jQuery background

Answer 2

Я не уверен, полностью ли здесь виноват угловой.

Глядя на ваш css, родитель должен иметь высоту 100%, чтобы ребенок имел полную высоту родителя.

.wrapper { 
    height: 100%; 
    min-height: 100%; 
    position: relative; 
    overflow: hidden; 
} 

.content-wrapper, .right-side { 
    min-height: 100%; 
    background-color: #ecf0f5; 
    z-index: 800; 
} 

or have an in-depth read of this