Question

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

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

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

是否有一种CSS只能让#people移动以适应身高的变化？我相当确定没有，因为固定元素被从文档流中取出。无论如何，我以为我会问。

更新以下是一个示例：http://jsfiddle.net/hbms2/9/。在默认显示屏上，所有蓝色控件都在一行上。当您将窗格调整得更窄并且它们跳到多行时，您可以看到“＃1＃”，“＃2”等等被覆盖。

Answer 1

嗯，这很简单。您将#controls设置为width：100％，这意味着它只会与窗口一样宽。您应该做什么，因为它是固定的，将左侧设置为：0;右：0; （因此它覆盖了页面）并且最小宽度足以适合您的控件。

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

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

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

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

如果视口小于宽度，控件元素仍将隐藏。没有办法使用CSS解决这个问题;你将不得不使用javascript（这将是复杂，繁琐，甚至可能不会产生所需的结果）或你可以创建另一个为较小的视口设计的网站。后者是目前最好的选择。

感谢您按照我的建议制作示例，这使得回答问题变得更加轻松。

Answer 2

我知道的唯一纯粹的CSS解决方案甚至会接近媒体查询，你必须做很多试验和错误，最终结果可能不是100完美。

因此，我使用了JavaScript（jQuery是为了舒适）。

您可以通过测试$(window).resize并更改margin-top元素的#people以匹配#header的高度来实现此目的。

的 Here's an example! 的

我做了什么：

$(function() { $people = $('#people'); //Cache them to not waste $header = $('#header'); //browser resources. $(window).resize(function() { //When window size changes //Check if the height changed if ($people.css('margin-top') != $header.height() + 5) { //Change height if it has. $people.css('margin-top', $header.height() + 5 + 'px'); } }); });

Answer 3

我只是试一试，我正在玩，但是这样的动态高度会有用吗？

http://jsfiddle.net/hbms2/10/

或者我完全走错了轨道？

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

3 个答案:

我做了什么：