如何拉伸垂直滚动？

Question

here我放了一些标准布局的简单示例（页眉、带有可滚动 div 的内容、页脚）

我坚持使用 css 拼图 - 如何拉伸滚动 div div#content > div#scroll 使其将页面填充到页脚？

div#page { /* aka html */
    height          : 100%;
    width           : 100%;
	margin          : 0 auto;
    box-sizing      : border-box;
    overflow        : auto;
}

div.cleaner {
    clear : both;
}

header {
    display   : block;
    width     : 100%;
}

header > div#left_head {
    float      : left;
    width      : 50%;
    box-sizing : border-box;
    border     : dotted blue 1px;
}

header > div#right_head {
    float      : right;
    width      : 50%;
    box-sizing : border-box;
    text-align : right;
    border     : dotted blue 1px;
}

footer {
    display   : block;
    width     : 100%;
    position  : absolute;
    left      : 0px;
    bottom    : 0px;
}

footer > div#left_foot {
    float      : left;
    width      : 50%;
    box-sizing : border-box;
    border     : dotted green 1px;
}

footer > div#right_foot {
    float      : right;
    width      : 50%;
    box-sizing : border-box;
    text-align : right;
    border     : dotted green 1px;
}

/*---------------->8---------------*/

div#content {
    width  : 90%;
    margin : 0 auto;
    border : dotted black 1px;
}

div#content > div#scroll {
    height    : 200px;
    overflow-y: auto;
}

<div id="page">
    <header>
        <div id="left_head">
            <span>here is left header</span>
        </div>
        <div id="right_head">
            <span>here is right header</span>
        </div>
    </header>

    <div id="dummy" class="cleaner" />
    
    <div id="content">
        <div id="scroll">
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
            <p>scrollable content</p>
        </div>
    </div>

    <footer>
        <div id="left_foot">
            <span>here is left foot</span>
        </div>
        <div id="right_foot">
            <span>here is right foot</span>
        </div>
    </footer>
</div>

在给定的示例中，我通过 200px 的硬编码值限制了高度。

任何想法，cmets - 赞赏。

谢谢！

Answer 1

我认为为此您需要 JavaScript，因为您需要确定 header 底部和 footer 顶部之间的距离。

您可以为此使用getBoundingClientRect()。

var content= document.querySelector('div#content');
var header= document.querySelector('header');
var footer= document.querySelector('footer');

content.style.height= footer.getBoundingClientRect().top - 
                      header.getBoundingClientRect().bottom - 1 + 'px';

因为header 的孩子是浮点数，您需要添加overflow:auto 以使header 具有高度（因此具有bottom 坐标）：

header {
  overflow: auto;
}

然后您可以更改此样式的高度：

div#content > div#scroll {
  height    : 200px;
  overflow-y: auto;
}

...到这个：

div#content > div#scroll {
  height    : 100%;
  overflow-y: auto;
}

由于content 现在有一个硬编码的高度，您需要在调整窗口大小时对其进行调整。你会在我的小提琴中看到这一点：

Fiddle