Question

我正在寻找一个优雅的解决方案，能够让最小高度为100％（窗口高度）的部分，其中div扩展以适应内容如果内容长于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/

非常感谢。

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)

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

1 个答案: