"fixed" footer at the bottom of the page, but after the content

Question

I currently have the following code:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

However, if the content is too large:

html, body, .content{
  height:100%;
}

nav {
  height: 15%;
  background-color: red;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
}

main {
  color: white;
  background-color: blue;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a mattis ante, ut rhoncus lorem. Sed pretium viverra elit, id sollicitudin lacus congue eu. Nam mattis velit at velit vulputate ornare vitae quis metus. Nam tortor elit, dictum id pellentesque id, efficitur sed nulla. Donec justo ipsum, porttitor eget odio a, laoreet dictum sapien. Pellentesque mi elit, facilisis ac suscipit vel, elementum non nisl. Aliquam sit amet felis a eros sagittis semper. Vestibulum maximus tristique diam, scelerisque posuere quam fermentum a. Quisque vitae dolor a sapien pretium luctus. Curabitur consectetur consequat diam id pellentesque. Donec non laoreet ipsum, ac pharetra ex. Etiam a tellus turpis. Aliquam at magna laoreet, consequat massa in, fringilla lorem.</p>
  
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

Is there any way I can center the content without using the set position: absolute; top: 50%; transform: translateY(-50%);?

E There is some way to make the footer align in the footer of the page while the content is small and do not create scroll bar and that this is below the content when you have scroll bar?

Answer 1

You get something very close to what you want with just flexbox

I made two examples, this model has little content and the footer is aligned at the base.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

---

And in this example I put a lot of content in the <main> and you can see that the footer was at the end of the content.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.content{
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

footer {
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,255,0,0.5);
  -ms-flex-item-align: end;
  align-self: flex-end;
}

main {
  color: white;
  background-color: blue;
  width: 100%;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
}

<div class="content">
  <nav>
    <p>Menu</p>
  </nav>
  <main>
    <p>content</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam facere doloribus necessitatibus modi vitae, velit at commodi obcaecati reiciendis reprehenderit vel pariatur molestiae. Modi, ratione minus facere eveniet amet aliquam voluptate laborum debitis quos, quibusdam consequatur ab quo vel a iure adipisci culpa accusamus atque? A laudantium quod dolor, dolorem omnis molestias dignissimos in nulla vel ducimus quos impedit sunt temporibus corrupti suscipit sit iusto nemo adipisci nostrum magni eos, modi qui! Reiciendis, accusantium nam. Non nisi esse placeat id quae ducimus nihil quos doloremque aut dolore. Adipisci, earum explicabo fugit delectus obcaecati laborum, ab unde mollitia tenetur consectetur, cum impedit minus? Libero quasi quis voluptatem atque quibusdam odit magnam pariatur numquam consectetur ex, error sequi. Enim impedit laudantium eveniet odit iste praesentium inventore assumenda in ex? Rem ullam quibusdam soluta a ab consectetur, fugit incidunt eum placeat eos quos deserunt explicabo, obcaecati, aliquid enim? Tenetur officia aspernatur eaque est numquam? Qui, aut? Iste accusantium cum laudantium mollitia aspernatur facilis error quasi quis non consectetur fuga, nobis labore nisi dolor ipsum placeat tenetur eaque consequuntur excepturi ipsa nihil libero! Voluptate id sapiente esse voluptatum non, totam aspernatur dolorem provident cum tenetur alias cupiditate quis, ex minima libero cumque dolores asperiores.</p>

  </main>
  <footer>
    <p>footer</p>
  </footer>
</div>

Answer 2

Puts padding-bottom in the body that solves the problem of large content, the question of centralizing content by what I understood you need a padding in the elements also