how to put fixed bars on top and bottom?

I would like to put a fixed nav bar on top and at the bottom of the screen. In former times that was quite easy using frames. How shall realize it nowadays (with html and css)?

Solution

You can refer following snippet and apply your own styles.

This is for your understanding purpose only.

body {
  font-family: sans-serif;
  color: #333;
  font-size: 16px;
  padding: 40px 0;
  margin: 0;
}

main {
  position: relative;
  background: #CCC;
  width: 100px;
  margin: auto;
}

header, footer {
  height: 40px;
  position: fixed;
  width: 100%;
  background-color: #FF0;
  text-align: center;
  font-size: 2rem;
}

header {
  top: 0;
}

footer {
  bottom: 0;
  color: #FFF;
  font-size: 0.85rem;
  background: #00F;
}

<body>
  <main>
    <header>Header</header>
    <section>
      <img src="https://placehold.co/400" />
      <h2>Quick brown fox</h2>
      <p>
        <img src="https://placehold.co/400" />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a pulvinar
        neque. Suspendisse dolor nibh, varius et pharetra at, dignissim ac
        risus. Sed bibendum mattis orci, a gravida nisi pulvinar nec. Vivamus eu
        justo nec nulla feugiat hendrerit. Donec mattis sodales nisi, elementum
        mollis nibh feugiat vitae. Duis eget dapibus risus. Sed efficitur
        facilisis turpis, et imperdiet elit auctor eu.
      </p>
    </section>
    <footer>Footer</footer>
  </main>
</body>