2

I am using align() from http://jeet.gs to position a div inside a fullscreened div, like so:

.fullscreened
    position relative
    display block
    height 100%
    width 100%
    height auto
    width 100vw
    margin 0
    min-height 100vh  

.aligned
    background-color white
    align()
    height auto

My problem is that the parent div does not resize when its child is bigger than full screen (the size of parent).

Docs say that align() does "aligning blocks relative to their container with position: absolute and fancy positioning and transform." My worry is that "absolute positioned elements are removed from the flow, thus ignored by other elements" (c). Therefore, logically, the parent fullscreened div would not grow with the size of child.

Is there a way around this in pure CSS or do I have to call this a downside of using jeet and fix with javascript?

What I am trying to achieve is having fullscreen containers that resize to bigger than fullscreen when content inside them is too big, like here: http://codepen.io/anon/pen/bxgyd

Is this a good design?

ivalub
  • 33
  • 3

1 Answers1

0

Jeet creator/maintainer here.

Here's an example of an element aligned inside of a larger-than-viewport container: http://codepen.io/corysimmons/pen/xpHuE

Let me know if you have anymore questions. =)

corysimmons
  • 7,296
  • 4
  • 57
  • 65
  • that looks nice and simple, thanks! Now, what if I want the container (`section` in this case) to grow with the element (`div`)? E.g. if I paste a couple of paragraphs of text inside the `div` it ends up bigger than the `section` container, which I would like to avoid if possible. Is that possible? – ivalub Jun 10 '14 at 20:00
  • In a case like this I'm not sure `align` can help. Try some of [these solutions](http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/) and if they don't work you'll probably need to use JS. – corysimmons Jun 10 '14 at 20:20
  • That's a great link, thanks @CorySimmons. I'll accept your answer based on this comment. – ivalub Jun 11 '14 at 16:07