8

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.

5
  • Does your background the size of the screen, or does it have repeat-x or repeat-x attributes?
    – Sean
    Feb 7, 2013 at 13:25
  • 1
    Can you post your code?
    – Scott
    Feb 7, 2013 at 13:29
  • background is the size of the screen no-repeat (background-size: cover). @Scott I will post code later if needed. Right the issues seems to be found below.
    – knalle
    Feb 7, 2013 at 14:07
  • @Scott jsfiddle here: jsfiddle.net/ZAAsc
    – knalle
    Feb 7, 2013 at 14:24
  • updated jsfiddle.net/ZAAsc/1 I was missing a height on the pattern - but problem is still min-height / height not covering the whole content, if the content is larger than the space available.
    – knalle
    Feb 7, 2013 at 14:28

3 Answers 3

31

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.

2
  • 1
    but I have to figure out who to make the parent div larger if the content (now with height:100%) larger if the content takes more height than available in the browser.
    – knalle
    Feb 7, 2013 at 14:06
  • 1
    @knalle Can you make a code example for that, to be sure we talk about the same thing? Feb 7, 2013 at 14:11
1

Rather use height: 100% instead of min-height and specify this in both div.full and div.pattern

1
  • 6
    yeah that makes sense bot what if the content requires more height than the browsers height?
    – knalle
    Feb 7, 2013 at 14:01
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.