html - 如何在固定位置div下动态定位div？

Question

我有一个具有流畅布局的照片库应用程序。 #header 和 #controls 设置为 position:fixed 以便当用户滚动时，它们会停留在窗口的顶部。

包含所有照片的 div #people 位于带填充的控件下方。在标准的 1280 x 1024 窗口中，一切看起来都很好。

但是，当窗口变小时，控件会换行，并且 #controls 会变高。因此，#people 会被部分隐藏。

有没有唯一的 CSS 方法可以让#people 移动以适应高度变化？我相当确定没有，因为固定元素已从文档流中删除。我想我还是会问的。

更新 这是一个例子:http://jsfiddle.net/hbms2/9/ .在默认显示中，所有蓝色控件都在一行中。当您将 Pane 调整得更窄并且它们跳到多行时，您会看到“#1#”、“#2”等被覆盖。

Answer 1

嗯，这很简单。您将 #controls 设置为 width:100%，这意味着它只会与窗口一样宽。你应该做的是，因为它是固定的，所以将边设置为 left:0;右:0； (因此它覆盖了页面)和宽度足以容纳您的控件的最小宽度。

body {
    min-width:700px
}
#controls {
    left:0;
    right:0;
    min-width: 700px;
}

现在，当您将窗口大小调整为小于 700 像素时，您的控件将不会挤在一起，您可以使用滚动条访问屏幕外的内容。

这里使用的是你的 jsfiddle:http://jsfiddle.net/hbms2/14/

注意:我只将修复应用到控件部分，其他 div 中的内容仍然会挤在一起，因为您用百分比指定了它们的宽度。 (你应该避免这样做)但是，你可以使用相同的方法修复它。

如果视口(viewport)小于它们的宽度，控件元素仍然会被隐藏。无法使用 CSS 解决此问题；您将不得不使用 javascript(这会很复杂、麻烦，甚至可能不会产生所需的结果)，或者您可以制作另一个专为较小视口(viewport)设计的站点。后者是迄今为止更好的选择。

感谢您按照我的建议制作示例，它使回答问题变得容易得多。