CODEWITHSUNDEEP
htmlcss
Jauan Laui
Jauan Laui

Reputation: 31

Absolute Div auto Height not working

I am working on a CSS3 tabs (Without JS) and having a big problem.

I am trying to make auto height of absolute div so that it can expand or shrink height accordinly but for some reasons it is not working.

I tried to give 100% height to my html,body but still not working. Without putting in more words, Here is JS fiddle.

Here is my relevant CSS:

.content {
    background: #3404FC;
    position: relative;
    width: 100%;
    height: 200px;
    z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
    top: 0;
    left: 0;
    /* padding: 10px 40px; */
    z-index: 1;
    opacity: 0;
}

As you can see blue background is height so why it is not taking auto height. I tried 100% but it is not working at all.

Please help!

Upvotes: 2

Views: 2832

Answers (3)

Shyam
Shyam

Reputation: 792

Use this :

body,html,.tabs{height:100%;}

Because you are using margin in tabs, its height will be more thant 100%.

Upvotes: 0

Jenti Dabhi
Jenti Dabhi

Reputation: 880

You can try this:

.content div{
  position: relative;

}/**instead of position: absolute;

you can selected div visibility: visible: and none-selected div visibility hidden;

Upvotes: 1

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Even though you've set the height to 100% of the parent div, in this case content it won't have a height. The reason is, all of your child elements are positioned absolute. This makes the elements go out of the normal flow making the height of the parent div to 0px.

Upvotes: 0

Related Questions