html - 重叠的动态固定标头

Question

我的固定标题与我的内容重叠。很像这里（位置固定内容重叠问题）

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

Answer 1

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

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

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

Answer 2

尝试将其更好地放置在您的盒子中。

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

例子：

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

因此，这就是您的浏览器将如何读取此内容的方式：我将在屏幕的右上角放置一个固定元素：距屏幕顶部 30 像素，距屏幕右侧 30 像素。

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

将所有内容放在一个 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、平板电脑等）的大型网站时才使用它......如果您只是在玩代码，只需坚持基础。