HTML->；固定顶部、固定底部和动态内容

我想创建一个页面，其中：

1） 顶部，100px，固定 2） 底部，100px，固定 3） 在顶部和底部之间有动态内容

我能够准确地创建它，但我有一个问题，当我滚动动态内容时，元素在顶部和底部上下移动，相同的元素通过固定的顶部/底部可见

我试着弄清楚：两者都有；在顶部和底部div上，但由于它们是固定的，所以很清楚：两者都是；没用

我想保持动态元素在contentdiv的顶部和底部之间，如果可能的话，仍然可以使用主文档滚动条在里面滚动

这里是一个示例，假设这些行表示顶部和底部的固定div，“元素”是动态内容

元素-不正确

---

元素-不正确

---

元素

元素

元素

元素

元素

---

元素-不正确

---

元素-不正确

---

希望我足够清楚，提前感谢

为顶部和底部元素提供背景色或背景图像。另外，给顶部和底部的z指数设置为3或更高可能是个好主意。

这里，看看这个

更新

---

我想这就是你要找的

看这个

HTML 更新

---

也更新了。

您能创建一个JSFIDLE来帮助我们更好地了解您吗？jsfiddle.netHi和感谢您的回复，实际上页面的顶部和底部并不完全在页面的顶部和底部（它们有一个填充/边距），因此即使给它们一个背景色/图像，滚动时也会出现问题。边距会留下一个间隙，但填充在框内，应该没有间隙。您好，谢谢您的回复，这正是我所需要的，但是它在旧浏览器中能工作吗？@Armkreuz它应该能工作，我没有使用一种非常独特的技术。只是把页眉和页脚放在一个固定的位置。正如Armkreuz所写：“实际上，页面的顶部和底部并不完全在页面的顶部和底部（它们有一个填充/边距）。”但是在这个例子中没有边距。@rmagnum2002您可以做一些小的更改。更改不多。通过更改

top

和

bottom

的值来添加边距。当然，我添加了边距，结果是，滚动文本会在页眉和页脚下显示边距。要处理的内容比边距还多。。）或者这里有一个更接近您在JSFIDLE上提供的示例的解决方案：

<header>
    This is the header!
</header>
<article>
    <p>Goodness one unimaginative rooster some that circa much jay goodness gosh pessimistic scantly dark some modest gasped where unexplainable some before about that a hello firefly macaw ethereally indecisive panda lorikeet where a peskily jellyfish a since lied factiously in and that after but falteringly so worm flabbily yet hey gladly more versus much precarious because a the boisterous quiet fed one alas hawk flawlessly thanks some.</p>
    <p>Squirrel much krill regarding before contrary jeez outdid warthog immaturely articulately valiant hey suggestive thus far won darn wow scorpion portentously more hotly miraculous jeepers meagerly since excluding that however pinched yet whale adoringly floppy tenably wow and after via for unproductively as one prior the more on urchin rang much because some more approving near oh a as far lion some lucky far much frog far and beneath underlay far after nosy jaguar subconscious after this far input frequently distant the much positively gagged jeez unobtrusively far sank less before babbled far by when this the this sensible outside.</p>
    <p>That far qualitatively intrepid vulture a ferret disgraceful moaned therefore easy much and curt insincerely dachshund notwithstanding yikes and dragonfly and patted until much jeez close fumed divisive copiously wherever near near far perceptible shrewdly ground yikes opened as elaborate adversely spilled that creepy imaginative by in hello groundhog magnificently jeez hence crud versus desperately caterpillar checked one wicked far some yikes.</p>
    <p>And darn dependent that urchin upon much jeez ably sniffed a less in far darn far incorrect between inept caterpillar man-of-war manta hence ironically into more amenable negative sanctimoniously tortoise eagle far spoiled clapped tepid yikes irresistibly testy warthog hugged immense much immense alas thus paid therefore agitatedly about well following the hey aboard and that after and condescending seagull because alas slept hey this went dove far much far considering raccoon witless under ungraceful.</p>
    <p>Emptied much gosh circuitously inside along a far pointed fanatic hey bravely with far yikes capybara meadowlark sedulous some lion squid floated darn drolly underwrote loving spat maliciously coaxing unwilling goodness seagull elephant snickered balked sloth for kookaburra inside untactfully so the where much human then because pungently cracked heard overtook firm skeptically reverently much some jeez less and hey towards.</p>
</article>
<footer>
    This is the footer!
</footer>

body {
    font-family: sans-serif;
}

header, footer {
    position: fixed;
    height: 100px;
    text-align: center;
    width: 100%;
    background: #ff0450;
    color: #fff;
    text-transform: uppercase;
    line-height: 6em;
}

header {
    top: 0;
}

footer {
    bottom: 0;
}

article {
    margin: 100px 50px 0;
}

article p {
    margin: 20px 0;
}

article p:first-line {
    font-variant: small-caps;
}

body {
    font-family: sans-serif;
}

header, footer {
    position: fixed;
    height: 100px;
    text-align: center;
    width: 100%;
    background: #ff0450;
    color: #fff;
    text-transform: uppercase;
    line-height: 6em;
}

header:before {
    content: "";
    position: absolute;
    height: 20px;
    background: #fff;
    z-index: 999;
    top: -20px;
    width: 100%;
    left: 0;
}

footer:before {
    content: "";
    position: absolute;
    height: 20px;
    background: #fff;
    z-index: 999;
    bottom: -20px;
    width: 100%;
    left: 0;
}

header {
    top: 0;
    margin-top: 20px;
}

footer {
    bottom: 0;
    margin-bottom: 20px;
}

article {
    margin: 120px 50px 0;
}

article p {
    margin: 20px 0;
}

article p:first-line {
    font-variant: small-caps;
}