CODEWITHSUNDEEP
htmlcss
yani
yani

Reputation: 29

Creating a full screen div

Hi I'm trying to create a nested div that will have the full height of the browser.

I'm using swipe.js, to be able to swipe between three full screen divs. I can get this to work if I define the height of the 'intro' divs but as I want this to work between different screen sizes I was hoping to do this with min-height etc. 

html {
    /* height: 100%; */
}

body {
    /* height: 100%; */
}

#wrapper {
    margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;
    /* min-height: 100%; */
    /* height: auto !important; */
    /* height: 100%; */
}

.swipe div {
    margin:0 0px;
    padding:0px 0px;
}

#intro {
    min-height: 100%;
    height: auto !important;
    height: 100%;

    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

and the html: 

<body>

<div id="wrapper">

    <div id='slider' class='swipe'>

    <div>
            <div id="intro" style='display:block; background: url(images/background.jpg) no-repeat center center fixed;'>
            </div>

            <div id="intro2" style='display:none'>2</div>

            <div id="intro3" style='display:none'>3</div>

        </div>

    </div><!-- #slider -->

</div><!-- #wrapper -->

<script src='swipe.js'></script>
<script>var slider = new Swipe(document.getElementById('slider'));
</script>
</body>

Any help or advice would be greatly appreciated

Upvotes: 3

Views: 6199

Answers (2)

Manoj De Mel
Manoj De Mel

Reputation: 985

See if this what you are trying to achieve:

body {
   height: 100%;
    width:100%;
}

#wrapper {
    position:absolute;
    margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;
    /* min-height: 100%; */
    /* height: auto !important; */
    height: 100%;
        width:100%;
}

.swipe{
    position:relative;
    height:100%;
    width:100%;
    margin:0 0px;
    padding:0px 0px;
    background-color:red;
}

#intro {
}

jsfiddle

Upvotes: 2

Roger
Roger

Reputation: 2952

Do as @grc suggests.

html, body, #wrapper, #slider, #slider, div { /*You may not want to set this to 'div'*/
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
}

#wrapper {
    height:100%;
    /*margin: 0 auto;
    min-width: 320px;
    max-width: 1200px;*/ <----- LOSE THIS. This adds nothing to your needs and won't work on IE6 if you want backwards compatibility.
}

The important part is not to set a max-width|height to the elements you want, a div will always expand to take the whole horizontal space available so you may want to lose the width property unless you do something like div{display:inline;} or something like that. Anyway, if you want to take vertical space, the height:100%; propperty is a must.

Take a look at this: http://jsfiddle.net/TdDuz/14/ (you work in the javascript)

A more complete example jsfiddle.net/TdDuz/15

Upvotes: 1

Related Questions