html - 重叠动态固定 header

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、平板电脑等)时才使用它...如果您只是玩代码，请坚持使用基础知识。