I have a problem regarding relative positioning. I want the body to have a background color of say, blue. Initially the page should be just of height 100% (that may vary from computer to laptop, of course, hence I can’t specify a fixed height in pixels), thus the entire page should appear blue. In the middle of the page is an element, that has been set to that position by relative positioning (it can’t be absolute, can it, in order to expand with its content). The element can expand vertically. If the height exceeds the boundary of the page, the page also should expand, the background of the expanded portion being still blue.
Now how do I achieve this? The only solution I can think of is to use relative positioning for the background element (which is blue and should remain blue on expansion). But for that, I must set it to the available height (relatively positioned elements cannot be assigned height through percentage value, so that rules out height: 100%). But the height itself will vary depending on the browser, viewport size, etc (and I can’t use Javascript!). So how do I do this?
Is the height of the element in the middle known?
You might want to take a look at this http://css-tricks.com/centering-in-the-unknown/
A live demo that might help http://jsfiddle.net/thebabydino/7N4Xx/
The JavaScript is just for changing the height of the div in the middle.