| 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