Is there an optimal approach to ensure that a webpage's square content appears "tall" when viewed in different screen orientations? For instance, when the device is held vertically, the content should occupy the full width, whereas in horizontal orientation, sidebars would appear on either side of the content, resulting in a square layout filling the entire height.
I have currently implemented this functionality using JavaScript, by monitoring the resize event, examining the container's dimensions, and manually computing widths and margins. However, I am curious if there is a more efficient method, possibly utilizing a pure CSS3 solution.
After reviewing Google's responsive guide, my assumption is that a custom stylesheet might be able to achieve this outcome, but I am uncertain on how to consistently fill the content in either the height or width direction.
To illustrate, here are examples of what the design would look like in portrait and landscape modes, with the red area representing the main content body, and the blue areas indicating additional space:
https://i.sstatic.net/JrkCB.png https://i.sstatic.net/MjYyX.png
I am presently exploring Angular Material, so if there is a framework-specific solution, that would also be satisfactory.
This is how the structure would be organized within the body - the Angular material grid tiles forming a 2x2 grid of equally sized squares, ensuring the overall body remains a square shape, without requiring scrolling:
<body>
<!-- sidebar if needed -->
<div id="left-side"></div>
<div id="main-container">
<mat-grid-list cols="2" rowHeight="1:1">
<mat-grid-tile>First square</mat-grid-tile>
<mat-grid-tile>Second square</mat-grid-tile>
<mat-grid-tile>Third square</mat-grid-tile>
<mat-grid-tile>Fourth square</mat-grid-tile>
</mat-grid-list>
</div>
<!-- sidebar if needed -->
<div id="right-side"></div>
</body>