如何拉伸垂直卷轴？

Question

here我提出了一些标准布局的简单示例（标题，带有可滚动div，页脚的内容）

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在给定的例子中，我用硬编码值200px来约束高度。

任何想法，评论 - 赞赏。

谢谢你！

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