CODEWITHSUNDEEP
javascripthtmlcss
user3681138
user3681138

Reputation: 337

CSS Height 100% doesn't work when overflowed

What's happening is that with this code:

HTML

<div class="one">

    <div class="will-overflow">
    </div>
</div>

CSS

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

.one {
    height: 100%;
    background: red;
}

.one .will-overflow {
    width: 20%;
    height: 2000px;
    background: blue;
}

I get a result like this: enter image description here

Demo

http://jsfiddle.net/kM46e/

Question

Is there anyway to expand the div.one height to fit the div.will-overflow. This is just an example, the content of that div is dynamic.

Upvotes: 0

Views: 177

Answers (2)

Amadan
Amadan

Reputation: 198314

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

.one {
    min-height: 100%;
    background: red;
}

.one .will-overflow {
    width: 20%;
    height: 1000px;
    background: blue;
}

By changing .one's height into min-height, you make it stretchy. However, now height: 100% of .will-overflow doesn't work, since without anything to stretch it, .one will have height of 0; so I change the height to 1000px to simulate some arbitrary-length content. Change it to a small value like 10px to check that it will still allow .one to fill the entire viewport.

Upvotes: 2

Adriano Resende
Adriano Resende

Reputation: 2619

Height correct is 100%.

.one .will-overflow {
    width: 20%;
    height: 120%;
    background: blue;
}

http://jsfiddle.net/kM46e/1/

Upvotes: 0

Related Questions