высота нг-вид 100% Переполнение

Question

Я строю приложение в angularjs и моей страницы индекса имеет нг-представление, где все содержимое впрыскивается с Ui-маршрутизатор:

<header> 
    <nav class="navbar"> 
     //navbar content here 
    </nav 
</header> 

<div ng-view></div> 

Проблема здесь состоит в том, что мой домашняя страница должна иметь высоту 100% - она ​​вводится в ng-view, поэтому я устанавливаю высоту ng-view на 100%. Теперь, когда отображается каждая другая страница просмотра ng, у меня есть вертикальное переполнение на странице - высота ng-view (100%) плюс все, что высота меню, так как она находится вне ng-view.

Here is a plunker example

Как я могу это исправить?

---

Даже если я принял ответ, я все еще была проблема, потому что моя домашняя страница нужно иметь 100% высоты, но CSS известково бы сократить определенный процент, и переполнение-у спрятан не пускала прокрутить вниз. Я закончил использование Viewport Percentage - установка div ng-view на 100vh в моем css исправила проблему для меня.

height: 100vh; 

Answer 1

Если вы действительно заботитесь о старых браузерах вы можете использовать яваскрипт

(Demo)

height = window.innerHeight || document.documentElement.clientHeight; 
 
document.getElementById("body").style.height = height - 50 + "px";

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.menu { 
 
    line-height: 50px; 
 
    background-color: rgb(50, 150, 250); 
 
    color: #fff; 
 
} 
 
.body { 
 
    background-color: rgb(40, 140, 240); 
 
    color: #fff; 
 
}

<div class="menu"> 
 
    Hello World 
 
</div> 
 
<div class="body" id="body"> 
 
    Foo Bar! 
 
</div>

Если вы на самом деле не заботиться о старых браузерах, но вы не хотите быть слишком новым, вы можете использовать метод css flexbox с display:flex и flex-flow:column на контейнере, а затем установить высоту верхней панели к статической высоте и height:100% и overflow:auto в нижней части

(Demo) (caniuse)

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
.menu { 
 
    height: 50px; 
 
    background-color: rgb(50, 150, 250); 
 
    color: #fff; 
 
} 
 
.body { 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(40, 140, 240); 
 
    color: #fff; 
 
}

<div class="menu"> 
 
    Hello World 
 
</div> 
 
<div class="body"> 
 
    Foo Bar! 
 
</div>

Если у вас вообще не заботятся о старых браузерах, и вам нравятся новые вещи, которые вы можете использовать функцию calc3() CSS3.

(Demo) (caniuse)

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.menu { 
 
    line-height: 50px; 
 
    background-color: rgb(50, 150, 250); 
 
    color: #fff; 
 
} 
 
.body { 
 
    height: calc(100% - 50px); 
 
    background-color: rgb(40, 140, 240); 
 
    color: #fff; 
 
}

<div class="menu"> 
 
    Hello World 
 
</div> 
 
<div class="body"> 
 
    Foo Bar! 
 
</div>