CSS 流体行问题

Question

我有一个 Angular Directive(指令)，它创建一个 3 行布局，具有固定的页眉和页脚，其中的内容应该根据中间的内容流动。

这是一个非常简单的小部件，它只显示内容 block 中的行集合，其中内容 block 需要首先加载高度，然后需要拉伸(stretch)直到达到最大高度，然后溢出隐藏应该开始吧。

我已经掌握了基础知识，但出于对我的爱，我无法获取内容 block 来拉伸(stretch)内容:

/* HTML */

<ng:editor data-control="smartobject">
    <div data-type="header">
        HEADER
    </div>
    <div data-type="body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante non volutpat finibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur mollis porta ullamcorper. Nunc enim eros, porttitor in lorem id, dictum iaculis orci. Pellentesque sollicitudin euismod sapien vitae pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam velit purus, scelerisque eget faucibus a, scelerisque sed neque. Proin auctor id eros a venenatis. Nam sed ex sit amet nibh convallis auctor. Vivamus nunc massa, lobortis sit amet fringilla ac, efficitur sed dui. Sed sit amet est ut lacus iaculis vulputate a at libero. Sed vel justo at erat bibendum egestas. Curabitur ac tempus nunc.</p>
    </div>
    <div data-type="footer">
        FOOTER
    </div>
</ng:editor>

/* CSS */

ng\:editor {
    border: solid 1px rgb(239, 239, 239);
    display: block;
    height: 100%;
    min-height: 315px;
    position: relative;
    width: 300px;
}
ng\:editor [data-type=header],
ng\:editor [data-type=footer] {
    height: 40px;
    left: 0;
    position: absolute;
}
ng\:editor [data-type=header] {
    border-bottom: solid 1px rgb(239, 239, 239);
    top: 0;
    width: 100%;
}
ng\:editor [data-type=footer] {
    border-top: solid 1px rgb(239, 239, 239);
    bottom: 0;
    width: 100%;
}
ng\:editor [data-type=body] {
    bottom: 40px;
    height: auto;
    left: 0;
    position: absolute;
    top: 40px;
    width: 100%;
}

使用 Angular ng:directive 是架构要求调用指令的符号，因此直接在其上设置样式，所以不要判断。

我所做的只是试图让内容拉伸(stretch) <p></p> 的高度内标记。

作为简单的 jsFiddle 来展示我所做的:FIDDLE

Answer 1

要拉伸(stretch) p 标签的高度试试这个:

ng\:editor [data-type=body] {
    padding-top: 40px;
    height: auto;
    padding-bottom: 40px;
    width: 100%;
}

我已经删除了 position:absolute 并为 padding 设置了与页眉和页脚相同的大小。