Question

考虑

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

是否可以保持foo的大小，并且在窗口大小改变时只使用CSS就可以填充页面的其余部分。 foo是一个固定大小的顶部横幅。酒吧的高度属性应该是多少？是的，

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

DEMO：JSFIDDLE

Answer 2

你应该看看CSS Media Queries 然后，您可以在屏幕调整大小期间为元素指定任何属性，而无需使用脚本。

示例：

body{
  background-color: #fff; 
}

#foo{
  width: 200px;
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
  #foo{
    width: 400px;
  }
}

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

2 个答案: