css - div填充可用高度

Question

我有一个问题。从代码中可以看出，在名为“div1”的 div 中我有 3 个 div。我希望第一个(黄色)div 在顶部，第三个(黄色)在底部，第二个 div(粉红色)填充剩余空间。唯一固定的高度是黄色 div 的高度。你能帮我吗，如何让粉红色的 div 填充剩余空间？这是我的代码:

<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
    <div id=div1 style="display: table-cell;background-color: #0f0;">

        <div style="background-color:yellow;width:100%;height:20px;">s</div>
        <div style="background-color:pink; width:100%;">
            Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
        </div>
        <div style="background-color:yellow;width:100%;height:20px;">s</div>
    </div>
    <div style="background-color: #f00;display: table-cell;width:250px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    </div>
</div>

Answer 1

必须将此作为答案发布才能包含图形。在 Firefox、Chrome 和 IE 中，您的页面看起来与我认为您描述的一样:

这是它应该出现的样子吗？