Response div maintaining aspect and always visible

Giganews Newsgroups
Subject: Response div maintaining aspect and always visible
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Mon, 9 Nov 2020

A need a div to be responsive, to maintain its aspect ratio and to
always be completely visible within the viewport.

A search turned up CSS like this

#wrap {
  width: 100%;
  display: inline-block;
  position: relative;
}
#wrap::after {
  padding-top: 56.25%; /* 16:9 ratio */
  display: block;
  content: '';
}
#editor {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

with this HTML

<div id="wrap">
  <div id="editor">
    <p>Hello World!</p>
  </div>
</div>

Alas it only works so long as ratio of the browser window is bigger
than, in this case, 16:9.

That is, when the browser window isn't tall enough I get scrollbars.
Ideally wrap's height (and width) should shrink to so that wrap never
extends beyond the viewport. How is this possible in CSS?

Andrew Poulos

Replies