CSS 扩展部分，最小高度为 100%，内容垂直居中答案

【问题标题】：CSS expanding section with min-height 100% with vertical centre contentCSS 扩展部分，最小高度为 100%，内容垂直居中
【发布时间】：2014-09-29 02:46:24
【问题描述】：

我正在寻找一个优雅的解决方案，能够让部分的最小高度为 100%（窗口高度），如果内容长于 100%，或者内容应该垂直居中在如果内容更小，则为 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/

非常感谢。

【问题讨论】：

标签： html css vertical-alignment expandable

【解决方案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)

【讨论】：