html - 具有 100% 全屏高度的 Angularjs ui-view

Question

我正在使用 angularjs 创建一个网络应用程序。我在 index.html 中添加了导航、内容和页脚。所以 ui-view 会相应地改变路线。我想为主页显示全屏背景图像，页面的其余部分将只根据其内容显示。

<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>

<!-- Main view  -->
<div ui-view></div>

<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>

这是将在 ui-view 中显示的 HTML，并希望显示 100% 的高度。它不显示 100% 高度。如果我在 index.html 中将其显示为 100% 背景图像宽度。我可以知道是哪一个导致了这个问题吗。

<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Grayscale</h1>
                    <p class="intro-text">A free, responsive, one page Bootstrap theme.<br>Created by Start Bootstrap.</p>
                    <a href="#about" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/intro-bg.jpg) no-repeat center center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Answer 1

你需要将主体的高度设置为 100%(可能还有所有父元素)

或者，尝试新的视口(viewport)高度 CSS 单位...

高度:100vh

参见 https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

支持看起来不错......

http://caniuse.com/#feat=viewport-units