Fixed header and footers, aspect ratio body-CodePudding

Thanks to a superb answer here, and another great one here, I've got most of the layout I'm aiming for. Sticky, fixed height header and footer, body in the middle - centered and at a fixed aspect ratio.

The only thing not working is that the body pushes the footer off the bottom, so that it's no longer sticky. (run snippet, scroll down to see the not-sticky-anymore footer).

The only way I've been able to affect this is by limiting the height of the #parent div, for example, to 80vh. This ends up leaving space above the footer depending on the vh.

Is there a way to do just this layout below, except keep the footer on the page?

I found a pertinent similar question here on SO, but alas, unanswered.

* { margin: 0; box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  background-color: #cffac7;
  height: 50px;
}

main {
  background-color: #55086d;
}

footer {
  background-color: #fceec7;
  height: 50px;
  margin-top: auto;
}


#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ar-box {
  max-width: 100%;
  max-height: 100%;
  background-color: #0bf;
  aspect-ratio: 3/5; 
}

.ar-box:after {
  display: block;
  content: "";
  min-width: 100vw;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./styles.css">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
</head>
<body>

  <header>header :-)</header>
  <main>
    <div id="parent">
      <div >body :-)</div>
    </div>
  </main>
  <footer>footer :-(</footer>

</body>
</html>

CodePudding user response：

There is a way to do this by setting the elements to be position:fixed.

I was able to achieve this, albeit not using flexbox styling, but nonetheless:

<body>
    <header/>
    <main/>
    <footer/>
</body>

------------------------

header {
    position: fixed;
    z-index: 1;
    height: 50px;
}

main {
    position: fixed;
    top: 50px;
    height: calc(100% - 100px); <-- total height of header/footer
}

footer {
    position: fixed;
    z-index: 1;
    top: calc(100% - 50px);
    height: 50px;
}

CodePudding user response：

Position: Sticky

Use position: relative; on body.
Use position: sticky; on both header and footer.
Use top: 0; on header and bottom: 0; on footer.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  position: relative;
}

header {
  background-color: #cffac7;
  height: 50px;
  position: sticky;
  top: 0;
}

main {
  background-color: #55086d;
}

footer {
  background-color: #fceec7;
  height: 50px;
  margin-top: auto;
  position: sticky;
  bottom: 0;
}

#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ar-box {
  max-width: 100%;
  max-height: 100%;
  background-color: #0bf;
  aspect-ratio: 3/5;
}

.ar-box:after {
  display: block;
  content: "";
  min-width: 100vw;
}

<body>
  <header>header :-)</header>
  <main>
    <div id="parent">
      <div >body :-)</div>
    </div>
  </main>
  <footer>footer :-(</footer>
</body>

Position: Fixed

Use position: fixed; and min-width:100%; on both header and footer.
Use top: 0; on header and bottom: 0; on footer.
Use margin: 50px 0; where you set the height and bottom of the header and footer. In this case, both are 50px, so you can use 50px 0.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  background-color: #cffac7;
  height: 50px;
  position: fixed;
  top: 0;
  min-width: 100%;
}

main {
  background-color: #55086d;
  margin: 50px 0;
}

footer {
  background-color: #fceec7;
  height: 50px;
  margin-top: auto;
  position: fixed;
  bottom: 0;
  min-width: 100%;
}

#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ar-box {
  max-width: 100%;
  max-height: 100%;
  background-color: #0bf;
  aspect-ratio: 3/5;
}

.ar-box:after {
  display: block;
  content: "";
  min-width: 100vw;
}

<body>
  <header>header :-)</header>
  <main>
    <div id="parent">
      <div >body :-)</div>
    </div>
  </main>
  <footer>footer :-(</footer>
</body>