Невозможно настроить конкретный вид в Angular

Question

У меня возникли проблемы с тем, как получить один из моих просмотров в Angular для отображения на определенном фоне. Я нахожу, что с приведенным ниже кодом весь вид, который я пытаюсь стилить, исчезает.

Все соответствующий код ниже:

HTML (index.html):

<div class="col-md-8 col-md-offset-2"> 
    <div ng-view></div> 
</div> 

Угловой вид:

<div class="main-body"> 
    <div ng-switch="xxCtrl.xxx"> 
    </div> 
</div> 

CSS:

body { 
    margin-top: 50px; 
    background: url('../img/main-bg.jpeg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    text-align: center; 
    font-size: 16px; 
    height:100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.main-body { 
    background-color: rgba(16, 16, 16, 0.6); 
    height: 100%; 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    overflow: scroll; overflow-x:hidden; 
    z-index: -1000000; 
} 

Я попытался перемещение основного тела в ng-switch, в самом ng-переключателе и т. д. Я даже попытался установить встроенный CSS с использованием ng-стиля, но я не смог установить высоту, равную 100%, независимо от того, как я ее отформатировал. Единственный раз, когда мне удалось отобразить фоновое изображение, как я хотел, было, когда я устанавливал оболочку div вне ng-view в index.html для основного тела. Тем не менее, я действительно не хочу, чтобы фон, который я создавал, отображался во всех представлениях - только один.

У меня такое чувство, что это проблема, связанная с CSS, а не угловая. Если кто-то может указать мне в правильном направлении здесь, было бы весьма полезно! Спасибо!

Answer 1

Удалось решить эту проблему, изменив высоту до 100vh вместо 100%.