Html CSS扩展部分，最小高度100%，垂直中心内容

我正在寻找一个优雅的解决方案，能够有最小高度为100%（窗口高度）的部分，如果内容长度超过100%，div将扩展以适合内容；如果内容较小，则内容应垂直居中于div

我已经找到了一个解决100%和扩展问题的简单方法，效果很好，我也有一个方法可以将内容垂直集中在一个div中，但是这使得扩展到内容不起作用，因为它涉及一个位置绝对内包装器

理想情况下，我希望（但可能不需要contentWrapper…）：

最后是我当前解决方案的一部分：

---

非常感谢。

我用一点JQuery提出了一个解决方案，效果很好。尽管为了保持样式与逻辑的分离，我仍然希望在不使用JQuery的情况下实现这一点，因此欢迎使用其他解决方案

HTML

Coffee/JS（加载和调整大小时调用）

<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>

<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

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

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

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%)

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