CODEWITHSUNDEEP
css
Stef Blokdijk
Stef Blokdijk

Reputation: 11

Full screen landing page height 100% is not working

I was trying to get a full screen height landing page like this one http://themeforest.net/item/de7igner-flat-ios7-inspired-coming-soon-template/full_screen_preview/5800714

But I Got this

https://i.sstatic.net/a3AcB.jpg

this is my code

    <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>

and my 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;
}


}

Upvotes: 0

Views: 2713

Answers (3)

maťo
maťo

Reputation: 1302

I think, but maybe I'm wrong, that better use is JavaScript to perform function findings accurate window or device height, because you can use other element directly end of this 100% height section without differences, also after resize window. (And also you can have title and other elements in middle)

This code is for example:

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

Upvotes: 1

Michał Kostrzyński
Michał Kostrzyński

Reputation: 373

You have to give your wrapper the position as an absolute.

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

Upvotes: 0

kba
kba

Reputation: 19466

Your wrapper is probably taking up 100% of the container it's in, but that container (the body) isn't taking up 100% of its container.

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

Upvotes: 1

Related Questions