全屏登陸頁面高度100％不工作

我試圖得到一個完整的屏幕高度的着陸頁是這樣一個 http://themeforest.net/item/de7igner-flat-ios7-inspired-coming-soon-template/full_screen_preview/5800714 全屏登陸頁面高度100％不工作

但我得到這個

http://imgur.com/pJkj5Ip.png

這是我的代碼

<div class="wrapper"> 
     <div class="headerbg"> 
     <header> 

      <div class="container"> 

       <div class="topheader wow fadeInDown"> 
        <img src="images/logo.png"> 

        <ul> 
         <li><a href="#"><img src="icons/twitter.png"></a></li> 
         <li><a href="#"><img src="icons/facebook.png"></a></li> 
         <li><a href="#"><img src="icons/soundcloud.png"></a></li> 
         <li><a href="#"><img src="icons/youtube.png"></a></li> 
        </ul> 
       </div> 

       <div class="wow fadeIn"> 
        <h1>Welcome</h1> 
        <h2>Our Website Is Coming Soon</h2> 
       </div> 

       <div class="wow fadeInUp"> 
        <div id="defaultCountdown"></div> 
       </div> 

      </div> 

     </header> 
     </div> 
    </div>

和我的CSS：

/*----------------------------------------------------------------------------------------------------------------- 
            Header 
---------------------------------------------------------------------------------------------------------------- */     

.wrapper { 
    width: 100%; 
    min-height: 100%; 
} 


.headerbg { 
    background: url(../images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height:100%; 
} 

header .container { 
    background:none; 
} 

.topheader { 
    height:100px; 
    margin:0; 
} 
.topheader img { 
    float:left; 
} 

.topheader ul { 
    float:right; 
    padding-right: 20px; 
    line-height:100px; 
    color:#fff; 
} 

.topheader li { 
    display:inline; 
} 
.topheader li img { 
    width:40px; 
    height:40px; 
    padding-top:30px; 


    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    transition: all 0.4s; 
} 

.topheader li img:hover { 
    opacity:0.5; 
} 


header h1 { 
    font-size:80px; 
    line-height:80px; 
    color:#fff; 
    text-align:center; 
    font-family: 'Raleway', sans-serif; 
    font-weight:100; 
    padding-top:75px; 
    text-transform:uppercase; 
    padding-bottom:0; 
} 

header h2 { 
    font-size:25px; 
    line-height:25px; 
    color:#fff; 
    text-align:center; 
    font-family: 'Raleway', sans-serif; 
    font-weight:300; 
    padding-top:0px; 
    padding-bottom:50px; 
} 

@media only screen and (max-width: 767px) { 

header { 
    height:500px; 
    width:100%; 
} 



header h1 { 
    font-size:40px; 
    line-height:40px; 
    color:#fff; 
    text-align:center; 
    font-family: 'Raleway', sans-serif; 
    font-weight:100; 
    padding-top:40px; 
    text-transform:uppercase; 
    padding-bottom:0px; 
} 

header h2 { 
    font-size:20px; 
    line-height:20px; 
    color:#fff; 
    text-align:center; 
    font-family: 'Raleway', sans-serif; 
    font-weight:300; 
    padding-right:10px; 
    padding-left:10px; 
    padding-top:0px; 
} 

.topheader li img { 
    width:30px; 
    height:30px; 
    padding-top:30px; 
} 

.topheader { 
    height:75px; 
    margin:0; 
} 
.topheader img { 
    width:150px; 
    height:75px; 
} 


}

來源

2014-10-02 Stef Blokdijk

您的包裝是可能佔用了其容器的100％，但該容器（身體）未佔用其容器的100％。

html, body { min-height: 100%; }

來源

2014-10-02 22:25:04 kba

沒有，沒有工作:( – 2014-10-02 22:25:58

在這種情況下，你可以提供一個jsfiddle？ – kba 2014-10-02 22:26:33

不客氣。 :-) – kba 2014-10-02 23:29:02

你必須給你的包裝絕對的位置。

.wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

來源

2014-10-02 22:27:00

沒關係 - 我認爲這是正確的。以防萬一 - 我認爲你提供的HTML不完整。 – 2014-10-02 22:28:37

至少IMG現在是全屏幕，但是當我使用絕對位置http://imgur.com/B5m5ik4 – 2014-10-02 22:31:03

哦。我現在輸入了標題的完整html – 2014-10-02 22:32:57

我想，但也許我錯了，這更好的用途是JavaScript的執行功能的研究結果精確窗口或設備的高度，因爲你可以用其他元素直接結束無差異這個100％的高度部分，也調整窗口大小後。（也可以有中級職稱等要素）

此代碼，例如：

HTML：

<div class="container"> 
    <h1>Welcome</h1> 
    <h2>Our Website Is Coming Soon</h2> 
</div> 
<div class="other"> 
    <h2>About us</h2> 
    <p> 
     am sit amet quam ut metus mattis condimentum. Vestibulum nec ultrices ex. Pellentesque eros mi, accumsan sit amet auctor ac, fringilla sit amet tortor. Nam sit amet quam ut metus mattis condimentum. Vestibulum nec ultrices ex. Pellentesque eros mi, accumsan sit amet auctor ac, fringilla sit amet tortor. Aliquam rutrum eros mauris, sit amet tincidunt purus tristique ac. Nunc semper dui ipsum. Vestibulum fermentum nunc enim, non gravida nibh iaculis eu. Vivamus pretium neque mauris.. 
    </p> 
</div>

CSS：

body{ 
    margin:0; 
} 
.container{ 
    background:#79F; 
    color:#fff; 
    text-align:center; 
} 
h1{ 
    margin:0 0 40px 0; 
} 
h2{ 
    margin:0; 
}

JS（jQuery的）：

$(function(){ 
    $wheight = $(window).height(); 
    $('.container').height($wheight/2+60); 
    $('.container').css('padding-top',$wheight/2-60+'px'); 

    $(window).resize(function(){ 
     $wheight = $(window).height(); 
     $('.container').height($wheight/2+60); 
     $('.container').css('padding-top',$wheight/2-60+'px'); 
    }); 
});

http://jsfiddle.net/0xsmvobu

來源

2014-10-02 22:51:36

全屏登陸頁面高度100％不工作

回答

相關問題