1

Thanks to a good answer here, and a superb 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/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>

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

</body>
</html>
goodson
  • 727
  • 2
  • 14
  • 24

2 Answers2

1

Here's a suggestion, using the "aspect ratio box" as a centered position absolute element, inside a flex: 1; parent

enter image description here

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

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

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

#parent {
  background-color: red;
  position: relative;
  flex: 1;
}

#aspectRatio {
  background-color: #0bf;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 5;
}
<header>HEADER</header>
<main id="parent">
  <section id="aspectRatio">Aspect 3/5</section>
</main>
<footer>FOOTER</footer>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Brilliant again! Thank you! I'm surprised position absolute and top:0 will work together. I would think that would place the aspectRatio element at the very top of the view. Can you explain it? – goodson Feb 16 '22 at 19:18
  • 1
    Thank you! :) @goodson your thinking is exact. But then `margin: auto;` comes into play. – Roko C. Buljan Feb 16 '22 at 19:26
  • 1
    @goodson PS, I even changed/edited my other [aspect ratio answer](https://stackoverflow.com/a/66721382/383904) to reflect this code here, since seems to be the simplest and most flexible solution - so thanks for asking a similar question ;) – Roko C. Buljan Feb 16 '22 at 19:31
-1

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;
}
David DiRico
  • 11
  • 3