0

I have a page that is split into main content and a footer, the two of which are grid elements in a parent container. The footer should be a fixed height, and the main content should be the rest of the screen height. That works, until I try to add an aspect-ratio to the main content. I would like it to have margin either on top and bottom, or left and right, depending on screen shape, to maintain an aspect ratio of 16/9.

This code works if the screen width is wide enough to need margin on the sides, but if the screen is narrow, it will not add margin on the top and bottom. The below snippet is resizable, so you can see that it does not work when page width is narrow.

How would I go about doing this?

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#container {
  resize: both;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  height: 100%;
  width: 100%;
}

#outer {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: 'main' 'footer'
}

#main {
  grid-area: main;
  border: solid;
  background: blue;
  aspect-ratio: 16/9;
  margin: auto;
  height: 100%;
}

#footer {
  grid-area: footer;
  border: solid;
  background: pink;
  height: 50px;
}
<div id="container">
  <div id="outer">

    <div id="main">
    </div>

    <div id="footer">
    </div>


  </div>
</div>
Dima
  • 459
  • 1
  • 3
  • 13
  • Does this answer your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) Please note there are many answers, including ones specific to grid layouts. – TylerH Feb 28 '23 at 16:06
  • @TylerH I can't seem to get any of the ones that mention 'grid' to work. For example, https://jsfiddle.net/cv37dbru/ – Dima Feb 28 '23 at 17:02

0 Answers0