html - 最小高度为 100% 且内容垂直居中的 CSS 扩展部分

Question

我正在寻找一个优雅的解决方案，以便能够拥有最小高度为 100%(窗口高度)的部分，如果内容长于 100% 或者内容应垂直居中，则 div 会扩展以适应内容div 如果内容较小。

我找到了一个解决 100% 和扩展问题的简单解决方案，效果很好，而且我还有一个将内容垂直居中放置在 div 中的解决方案，但这使得扩展到内容不起作用，因为它涉及定位绝对内包装。

理想情况下我想要(但也许不需要 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>

这是我当前的 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

...还有我的手写笔...

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

最后是我当前解决方案的 JSFiddle:http://jsfiddle.net/L265z/

非常感谢。

Answer 1

我想出了一个使用少量 JQuery 的解决方案，效果很好。尽管为了将样式与逻辑分开，我仍然理想地希望在没有 JQuery 的情况下执行此操作，但欢迎使用其他解决方案。

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(在加载和调整大小时调用)

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