0

I need a wordpress single-post presentation to work like this:

[top_section] (half the leftover space)

[middle_section] (height set by content, that is an image; no padding/margin)

[bottom_section] (half the leftover space)

The content in the top and bottom sections shouldn't overflow.

Examples (different browser window height):

higher window, smaller center-image

smaller window, larger center-image

Any ideas? Using div's and setting absolute position doesn't work because of the fluid height of the middle section. Using a table with three 's and height:auto or 50% on the top and bottom doesn't work...

Eirik
  • 649
  • 2
  • 5
  • 13
  • Please draw something at least with MS Paint, I am not sure how can the top section need to deal with leftover :/? – Daniel Cheung Aug 23 '14 at 11:42
  • example: usable browser area is 750px. Center image height is 400, the top and bottom bars should each be 175px. If the image changes to 300px the top and bottom bars should each be 225px, regardless of content. If the browser window is 600px the top and bottom bottom bars should be 100px for a 400px image, and so on ... – Eirik Aug 23 '14 at 11:58

1 Answers1

0

As described here: centering things

The block is centered vertically by treating it in CSS as a table-cell:

DIV.container {
    min-height: 10em;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
}

The height:100vh; setting allows me to fill the whole browser window. Ref: a great answer here

Community
  • 1
  • 1
Eirik
  • 649
  • 2
  • 5
  • 13