登陆页面占据显示器的整个高度 - 对于每种分辨率



我想得到像这个网站一样的效果: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
}

将高度设置为 100vh

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

相关内容

  • 没有找到相关文章

最新更新