缩放框上方的 CSS 固定大小框

Question

考虑

<div id="foo">
  Lorem ipsum
</div>
<div id="bar">
  sit amet
</div>

是否可以仅使用 CSS 来保持 foo 的大小，并在窗口大小发生变化时让 bar 填充页面的其余部分。 foo 是固定大小的顶部横幅。 bar 的 height 属性应该是多少？是的，

screen.height-padding-getElementById("foo").style.height 

但我更愿意在没有脚本的情况下进行。

Answer 1

我想这就是你要的，如果没有给我评论，我可以修改:

#foo {
    height: 50px;
    width: 100%;
    background: red;
}
#bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: blue;
}

演示:JSFIDDLE