Question

我有一个角度指令，它创建一个3行布局，带有固定的页眉和页脚，其中内容应根据中间的内容流畅。

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

我已经掌握了基础知识，但是为了爱我，我无法通过内容块来扩展内容：

/ * 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%;
}

使用角度ng:directive表示法来调用指令是一种架构要求，因此直接在其上设置样式，所以不要判断。

我正在努力让内容扩展到<p></p>标记的高度。

简单的jsFiddle表示我已完成的工作：FIDDLE

Answer 1

要拉伸p标签的高度，请尝试：

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

我删除了position:absolute并将padding的大小与页眉和页脚相同。

CSS流体行问题

1 个答案: