Page Widget How to - Create Fixed header and footer








Question

We would like to know how to create Fixed header and footer.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
header, footer {<!--from w w  w. j av  a 2  s  .  com-->
  position: fixed;
  height: 100px;
  text-align: center;
  width: 100%;
  background: #EEE;
  color: black;
  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;
}
</style>
</head>
<body>
  <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>
    <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>
</html>

The code above is rendered as follows: