CSS expanding section with min-height 100% with vertical centre content

Question

I am looking for an elegant solution to be able to have sections with min-height 100% (window height) where the div expands to fit the content IF the content is longer than 100% OR the content should vertically centre in the div if the content is smaller.

I have found a simple solution for the 100% and expanding problem which works well, and I also have a solution to vertically centre the content in a div, but this makes the expanding-to-content not work as it involves an position absolute inner wrapper.

Ideally I would like (but maybe no need for contentWrapper...):

<section> (100% height of window or height of child, whichever is larger)
    <div> (content wrapper, 100% height of parent section or stretching to content)
      <p> (whatever content, image, div, etc, which stretches the size of the content wrapper and section, OR vertically centres if small)
      </p>
    </div>
</section>

Here is my current html...

<section id='a'>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique dui tellus, sit amet laoreet est rhoncus sit amet. Donec ac fringilla enim, at molestie orci.
    </p>
    <p>
        Vivamus accumsan id dui vitae laoreet. Donec rutrum magna et magna pulvinar lobortis. Vestibulum non lacinia augue. Nullam scelerisque venenatis enim suscipit vulputate. Vivamus magna ipsum, rhoncus ac laoreet auctor, tristique eget mi. Nam ultricies dui vel fringilla facilisis.
    </p>
    <p>
        Aenean non ultrices risus, varius porta nunc. Morbi eu suscipit purus, eu posuere elit. Vivamus dictum rhoncus odio, id pharetra mi dapibus at.
    </p>
    <p>
        Aenean non ultrices risus, varius porta nunc. Morbi eu suscipit purus, eu posuere elit. Vivamus dictum rhoncus odio, id pharetra mi dapibus at.
    </p>
</section>
<section id='b'>
    ...content
</section>
<section id='c'>
    ...content
</section>
<section id='d'>
    ...content
</section>
...more sections

...and my Stylus...

html, body
    width 100%
    height 100%
    padding 0
    margin 0

section
    width 85%
    min-height 100%
    border 1px solid black
    display inline-block
    margin 0
    padding 0
    position relative
    float right

p
    font-size 2em
    font-family 'Helvetica'
    font-weight bold
    width 50%
    margin-left auto
    margin-right auto

And finally a JSFiddle of my current solution: http://jsfiddle.net/L265z/

Many thanks.

score 0 · Answer 1 · answered Aug 07 '14 at 11:37

I have come up with a solution using a tiny bit of JQuery, which works well. Although I would still ideally like to do this without JQuery for the sake of keeping the styling separate from the logic, so other solutions are welcome.

HTML

<section>
    <div class='contentWrap'>
        ...content goes here...
    </div>
</section>

CSS

section
    width wrapperWidth
    min-height 100%
    display inline-block
    margin 0
    padding 0
    position relative
    float right
    border-bottom 1px solid black
    .contentWrap
        position absolute
        z-index 1
        display inline-block
        top 50%
        width 100%
        min-height 50%
        height auto
        transform translateY(-50%)
        -webkit-transform translateY(-50%)
        -moz-transform translateY(-50%)
        -ms-transform translateY(-50%)
        -o-transform translateY(-50%)

Coffee/JS (called on load and on resize)

heightFix = ->
    $('section').each ->
        if this.children[0].clientHeight > $(window).innerHeight()
            childHeight = this.children[0].clientHeight
            $(this).height(childHeight)

CSS expanding section with min-height 100% with vertical centre content

1 Answers1