nested div does not fill parent div with min-height 100%

Question

1) I have a div.full with min-height: 100% (html, body is 100% height)

2) Nested inside i have a div.pattern with a fixed background pattern (an overlay)

3) and nested again some content.

I cannot seem to make the div.pattern fill the entire parent (if the content is small in height). Preferreably I would like avoid js for fixing this.

i can't get jsfiddle working. will try psoting one later.

Answer 1

An element can only get set to a height/width value in percent, when the height of the parent is also defined. In your case, the parent has only a min-height, what is not an absolute height definition. You must set the height explicit to get a 100% height of your nested div.

Answer 2

而是使用height: 100%而不是min-height并在div.full和div.pattern中指定它

Answer 3

The solution for me was to use multiple backgrounds rather than the extra div overlay. I did it in the CSS2 pseudo elements fashion (::before with an background pattern) described here:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/