CODEWITHSUNDEEP
htmlcssheight
Quincy Norbert
Quincy Norbert

Reputation: 451

Div 100% height displaying as 0px?

I'm currently building a website and have a small problem that i cant seem to tackle, I have created a div with a height of 100%, inside that div is a slider div also with a height of 100%, the problem is the first div displays a height of 0px so that the div that should come below the slider div displays behind the slider div, anyone that can help me?

Here's my code:

.slider-container {
    width:                              100%;
    min-height:                         100%;
    background-color:                   white;
    float:                              left;
}

.main-content {
    width:                              100%;
    height:                             1000px;
    background-color:                   pink;
    float:                              left;
}

.column {
    width:                              31%;
    height:                             auto;
    background-color:                   orange;
    float:                              left
}

/* SLIDER */

.caption {
    width:                              500px;
    background-image:                   url("..//img/caption-bg.png");
    background-size:                    100%;
    position:                           absolute;
    z-index:                            99;
    overflow:                           hidden;
    margin-top:                         7%;
    margin-left:                        5%;
    -moz-border-radius:                 20px;
    border-radius:                      20px;
}

.caption-text {
    max-width:                          460px;
    overflow:                           hidden;
    margin:                             20px;
}

.wrapper .slider-container #slideshow { 
    position:                           relative; 
    width:                              100%;
    float:                              left;
}

.wrapper .slider-container #slideshow > div { 
    position:                           absolute; 
}

The slider-container div should have 100% height so that the main-content div comes below it.

Thanks for in the advance!

Upvotes: 14

Views: 19504

Answers (3)

Hu Kenneth
Hu Kenneth

Reputation: 241

Try this

    <style type="text/css">
html {
    height: 100%;
}

body {
    text-align: center;
    height: 100%; 
}

        </style>

Upvotes: 0

Adrift
Adrift

Reputation: 59779

The % unit is always relative to some value .. even though you've specified height: 100%; on your <body> you will notice it ends up being 0px tall as are all the <div> that you gave 100% height to, because those values are relative to its parent container, which ends up being the root <html> element which currently has no explicit height set, so it defaults to auto. If you give the root element height: 100%; you will get the expected behaviour

Upvotes: 16

Milos Sretin
Milos Sretin

Reputation: 1748

Try giving a height to:

html, body {
    width:100%;
    position:relative;
}

Upvotes: 1

Related Questions