Question

我正在使用angularjs创建一个Web应用程序。我在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>

这是HTML将在ui-view中显示并希望显示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％（也可能是所有父元素）

或者，尝试新的视口高度CSS单元...

身高：100vh

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

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

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

Angulajs ui-view，100％全屏高度

1 个答案: