定位固定内容重叠问题

Soa*_*abh 12 html css html5

这是我的html5标记

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
Run Code Online (Sandbox Code Playgroud)

现在用过css

header{ height: 95px;position: fixed;width: 100%;min-width: 980px;}
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}
Run Code Online (Sandbox Code Playgroud)

现在我的问题是我把任何内容放在里面

<div id="content">
</div>
Run Code Online (Sandbox Code Playgroud)

内容来自top:0,这不是必需的.我不想在内容上使用填充或边距.是否有任何方式从哪个内容下面的标题.

小智 14

最佳解决方案使用:

position: sticky;
top: 0;
Run Code Online (Sandbox Code Playgroud)


Mar*_*cel 9

主要原因是因为它<header>正在position:fixed将其从文档流中取出.你将需要添加marginpadding到无论是<body>或您<content>(??)元素.此外,如果使用HTML5元素,请将其添加到CSS规则的顶部,以便与旧版浏览器兼容.

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

摘自Eric Meyer的CSS重置.