0

I hope the title was clear enough to get the general idea. The problem itself is a little bit trickier. To help with the understanding see my illustration below.

Since I don't have enough reputation points to include the illustration directly, here is a link to it on flickr.com: http://www.flickr.com/photos/cumbrowski/12009919663/

Or link to image here at Stackoverflow.com: https://i.stack.imgur.com/1Kswi.png

Phrasing it out in full-text.

  • The outer-most container should always be vertically and horizontally centered in the available browser window. Both Width and Height are dynamic, but the height cannot exceed 90% of the available window height.

  • The inside of the container has 3 containers.

  • The top-most container has a fixed height but the width should span the entire outer container width.

  • The bottom-most container should also span the entire width of the outer container, but it's height can vary, based on it's content. Preferably, If the container is empty, the height should shrink to 0 (if possible).

  • The center-most container controls the width and height of the outer-container, except, if the total height of the outer container would exceed the maximum of 90% of the available window height. In that case the center-container should show scroll bars.

NOTE: If there is no pure CSS based solution possible and the help of JavaScript needed, okay, sad, but if necessary, what can I do?! jQuery would be okay in that case as well.

Carsten Cumbrowski
  • 95
  • 6
  • would something like this will help ? (it's about box-sizing) http://codepen.io/gc-nomade/pen/kfApH vertical padding or margin in % will take parent's width as reference, not height (see http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width) – G-Cyrillus Jan 18 '14 at 11:26
  • fork of initial demo http://codepen.io/anon/pen/qLakJ – G-Cyrillus Jan 18 '14 at 11:33
  • While using `transform:scale` is a fun trick, it's not recommended. Everything gets scaled down, so fonts become harder to read. – MueR Jan 18 '14 at 11:36
  • nice, but not exactly what I was looking for. If the whole thing could be wrapped again and centered, that would be nice. Oh, just fyi, the whole construct is meant to be an overlay over the whole screen. First a semi-transparent full size div is put over the page content and then the construct for which I am seeking a solution here. – Carsten Cumbrowski Jan 18 '14 at 23:51

0 Answers0