使用上下高度未知的CSS将div设置为剩余高度

小编典典

使用上下高度未知的CSS将div设置为剩余高度

css

是否可以使包装器填充窗口高度（不滚动），并且可以使div滚动中心而不弄乱像素和javascript？

<div id="wrapper">
  <h1>Header</h1>
  <div id="center">
    <div style="height:1000px">high content</div>
  </div>
  <div id="footer">Footer</div>
</div>

基本上，我希望页眉在顶部可见，而页脚在底部始终可见，并且在中心具有可滚动的内容，占据剩余的高度。
页眉，页脚和中心div的高度都是未知的（未设置px或％，即可变的字体大小或填充）。纯CSS可能吗？

阅读 395

2020-05-16

共1个答案

小编典典

html, body {

    margin: 0;

    padding: 0;

    height: 100%;

}

.l-fit-height {

    display: table;

    height: 100%;

}

.l-fit-height-row {

    display: table-row;

    height: 1px;

}

.l-fit-height-row-content {

    /* Firefox requires this */

    display: table-cell;

}

.l-fit-height-row-expanded {

    height: 100%;

    display: table-row;

}

.l-fit-height-row-expanded > .l-fit-height-row-content {

    height: 100%;

    width: 100%;

}

@-moz-document url-prefix() {

    .l-scroll {

        /* Firefox requires this to do the absolute positioning correctly */

        display: inline-block;

    }

}

.l-scroll {

    overflow-y: auto;

    position: relative;

    height: 1000px;

}

.l-scroll-content {

    position: absolute;

    top: 0;

    bottom: 0;

    height: 1000px;

    min-height:100px;

}


<div class="l-fit-height">

    <section class="l-fit-height-row">

        <div class="l-fit-height-row-content">

            <p>Header</p>

        </div>

    </section>

    <section class="l-fit-height-row-expanded">

        <div class="l-fit-height-row-content l-scroll">

            <div class="l-scroll-content">

                <p>Foo</p>

            </div>

        </div>

    </section>

    <section class="l-fit-height-row">

        <div class="l-fit-height-row-content">

            <p>Footer</p>

        </div>

    </section>

</div>

2020-05-16