重叠动态固定标头

Question

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

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

Answer 1

尝试将它更好地放在盒子里。

创建固定元素时，需要完全位置：

示例：

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

所以，这就是你的浏览器读取的方式：我会在屏幕的右上角放置一个固定元素：距离顶部30个像素，距离屏幕右侧30个像素。 / em>的

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

把所有东西放在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执行此操作，更新标题的大小和其他小部件的边距。有关示例（使用CoffeeScript，在Firefox和Chrome上测试过）或使用jQuery的my fiddle，请参阅this other fiddle。基本上它正在将CSS更改为多个元素。

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

如果JavaScript / CoffeeScript没有完成尺寸更改，您必须放置一个事件监听器来更新.contents CSS。