html - 着陆页占据整个显示器的高度 - 对于每个分辨率

Question

我想在这个网站上得到这样的效果:http://make-lemonade.co/themes/kodax/着陆页占据整个显示器的高度

为此，我使用 Bootstrap 3.1.1 页面。

我的代码:

HTML:

    <div id="panorama-home">
        <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                </ul>
                <h3 class="text-muted">
                    <img src="img/LOGO1.png" />
                </h3>
            </div>

            <div class="row">
                <div class="col col-md-12">
                    <h1 style="font-size:52px; padding-top:140px; text-align:center">
                        Text field
                    </h1>
                    <!--<p style="margin-left:160px; color:white;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
                </div>
            </div>

        <div id="boxlinks" class="arrow" style="position: relative; text-align:center; padding-top:70px;padding-bottom:30px;">
            <a href="#marketing-text"><img src="img/down-arrow.png" style="width:100px; height:100px;"/></a>
        </div>
    </div>
 </div>

CSS:

#panorama-home {
    background: url("img/home.jpg") no-repeat center center; 
    border-bottom: 1px solid #EEEEEE;
    color: #FFFFFF;
    display: block;
    padding:120px 0;
    position:relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

Answer 1

设置高度为100vh

#panorama-home {
    ...
    height: 100vh;
}