重叠的动态固定标头

Question

我的固定标题与我的内容重叠。 很像这里 (Position fixed content overlapping problem)

但我的标题是动态的，所以有时高度不总是 50 像素，有时是 52、100 ...

Answer 1

尽量把它放在你的盒子里。

当你创建一个固定元素时，它需要一个准确的位置：

例子：

#header{ 
    height: 95px;
    width: 640px;
    position: fixed;
    top: 30px;
    right: 30px;
}

因此，您的浏览器会这样读取：我将在屏幕右上角放置一个固定元素：距屏幕顶部 30 像素，距屏幕右侧 30 像素。

原因那些固定的元素是一个在另一个之上，因为他没有定义top/bottom和left/right位置正确。添加更多文本，您将看到是否可以在固定元素上滚动（不能......）。

将所有内容放在一个 div 中，然后 ID'it #bigBody。给#bigBody 一个准确的宽度和高度，比如说1000 宽度和600 高度。 现在添加这些：

#header {
    height: 50px;
    width: 600px;
    position: fixed;
    top: 30px;
    right: 30px;
}

#footer {
    background: #fff;
    bottom: 0;
    right: 0;
    height: 30px;
    width: 600px;
    position: fixed;
}

min-width 在这里无关紧要...只有在您设计需要多个设备访问（如 iPhone、平板电脑等）的大型网站时才使用此功能...如果您只是使用代码并坚持基础知识。

Answer 2

您可以通过 JavaScript 做到这一点，同时更新标题的大小和其他小部件的边距。有关示例，请参阅 my fiddle（使用 CoffeeScript，在 Firefox 和 Chrome 上测试），或使用 jQuery 的 this other fiddle。基本上，它会同时为多个元素更改 CSS。

header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }

如果大小更改不是由 JavaScript/CoffeeScript 完成的，则必须放置一个事件侦听器来更新 .contents CSS。