使列向下流动到最小宽度，然后向下推动浮动侧边栏

Question

假设您有两个 div：一个具有流动宽度和最小宽度，另一个 div 向右浮动。例如，这个live demo (with code) at jsbin.com 有这个：

<div id="container">
  <div id="header">header</div>
  <div id="fixedFloatingColumn">fixed-size column<br />o<br />o<br />o<br />o</div>
  <div id="fluidNonfloatingColumnContainer">
    <div class="column">stretchable column 1</div>
    <div class="column">stretchable column 2</div>
    <div class="column">stretchable column 3</div>
  </div>
  <div id="footer">footer</div>
</div>

如果您调整浏览器大小并使其变窄，流体 div 会相应调整，直到达到最小宽度。之后，如果进一步缩小窗口，会出现水平滚动条，右侧浮动 div 开始溢出隐藏到窗口右侧。

我想要的是，如果用户不断缩小窗口，在非浮动 div 达到最小宽度后，浏览器应该将浮动侧边栏 div 推到非浮动内容下方，而不是溢出 (隐藏）向右。这可能吗？

Answer 1

如果您愿意使用媒体查询，我相信是的。对于如何进行“响应式网页设计”的简短入门，我将首先查看 Ethan Marcotte 的 article。 Simon Collison 的网站是我认为您正在努力实现的目标的出色 example。