Adjust Section [Position: Absolute]

Question

People,

I’m doing a website as a college project, but I’m picking up a little bit to solve a problem with the positions of the elements. I have 3 sections, one adjusted to be Header, one adjusted to be Content and one adjusted to be Footer. The header and footer have the attribute "position: Absolute" however, I would like to make the content start below the header and end before the footer without having to adjust size for them.

As it is now:

How I want it to stay:

The red line represents the size of the Section.

Answer 1

I believe your intention in putting position:absolute is to maintain the header and the footer always stopped in the same lubar. So I made an example with the main occupying 100% of the available height, and overflow:auto, so just the main will have scroll and the other elements are always positioned in the top and in the bottom.

See how it looks:

OBS: Run tb as "Whole Page" to see how footer behaves when the content is not large enough to scroll turn up

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
header {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: #f00;
}
main {
  flex: 1;
  overflow: auto;
  background-color: #ddd;
}
footer {
  width: 100%;
  background-color: #00f;
}

<header>header</header>
<main>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam ipsam repellat eos animi officia qui, quia amet accusamus, fugit eius consectetur mollitia. Atque ea veritatis expedita dolorem unde? Alias, nihil? Assumenda quaerat officiis animi ipsum ut aliquam, consectetur dignissimos facilis impedit, est enim perspiciatis voluptas ea dolore velit accusamus cupiditate numquam amet mollitia asperiores recusandae laborum qui debitis iste! Aliquid veniam quibusdam aperiam sequi, quae porro ab et illo dolor nulla voluptatem, suscipit sapiente quos dicta tempora eius placeat cumque molestiae culpa nam reprehenderit? Suscipit animi, assumenda obcaecati nobis magnam esse enim deserunt libero ullam, omnis facilis accusantium, fuga molestias reiciendis. Recusandae aspernatur, magnam beatae at debitis, enim quam, quod ea maxime exercitationem nesciunt nisi. Consectetur provident quidem sequi temporibus esse nostrum eius obcaecati quam autem quae quo illo facere architecto iste nesciunt, aliquam delectus dignissimos inventore ab, excepturi dolorem quia quibusdam. Culpa cum amet ducimus, commodi quisquam laudantium in rem mollitia qui impedit odit ex neque laboriosam repellat, inventore eaque doloribus accusamus quod error! Dolorem, libero id laboriosam deserunt dolore fugiat quo at explicabo asperiores dicta sequi nemo quidem ab distinctio molestiae, accusamus, reiciendis qui atque blanditiis mollitia incidunt! Natus temporibus eum sint libero saepe aspernatur, atque animi? Mollitia?
</main>
<footer>footer</footer>

Answer 2

You can use the unit vh to set the container height to 100% static (can be relative as well), and use flexbox to distribute the elements at the top, middle and footer with justify-content: space-between and flex-direction: column

* {
  margin: 0;
}
.ctn {  
  background: #cecece;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#header {
  background: #424242;
  text-align: center;
  color: white;
}
#content {
  background: #ccc;
  text-align: center;
  flex-basis: 100%;
}
#footer {
  background: #424242;
  text-align: center;
  color: white;
}

<div class="ctn">

  <section id="header">Header</section>
    <section id="content">
      content <br>
      content <br>
      content <br>
      content <br>
      content <br>
      content <br>
    </section>
  <section id="footer">Footer</section>

</div>