Question

i would like to create a single page where:

1) The top, 100px, fixed
2) The bottom, 100px, fixed
3) Between top and bottom there is dynamic content

I was able to create exactly that but i have an issue, when i am scrolling the dynamic content, the elements go under and over the top and bottom and the same elements are visible thru the fixed top/bottom.

I tried clear: both; on the top and bottom div, but since they are fixed, the clear: both; did’nt works.

I would like to keep the dynamics elements inside the content div between top and bottom and if possible still use the main document scroll bar to scroll inside it.

Here is an example, assume the lines represent the top and bottom fixed div, and the ‘element’ are the dynamic contents.

element – not correct

---

element – not correct

---

element

element

element

element

element

---

element – not correct

---

element – not correct

Hope i am clear enough and thanks in advance!

Answer 1

I guess this is what you’re looking for.

See this fiddle.

HTML

<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>

CSS

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;
}

Update

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;
}

Updated the fiddle too.