确保网页的方形内容显示为“高”的正确方法是什么？例如，如果您的手机或显示器处于纵向模式，则内容将采用全宽度，但如果处于横向模式，则内容的侧面会出现侧边栏，因此主体是正方形，填满整个高度。
我已经使用 JavaScript 完成了此操作，通过处理调整大小事件并检查容器的高度和宽度，并手动计算宽度和边距。但我确信有更好的方法，甚至可能是纯 CSS3 解决方案。
查看 Google's responsive guide ，我猜也许自定义样式表可以做到这一点，但我不知道如何始终使内容始终填充高度或宽度。
这是纵向和横向模式下的样子，其中红色部分是主体，蓝色部分是额外的填充空间:
我目前正在尝试 Angular Material，因此如果有特定于该框架的解决方案，那也可以。
这是主体内部的布局 - Angular Material 网格图 block 都是正方形，因此网格是 2x2，有 4 个相同大小的正方形，这意味着整个主体将是一个正方形 - 我希望 2x2 网格如下不滚动就尽可能大:
<body>
<!-- if necessary -->
<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>
<!-- if necessary -->
<div id="right-side"></div>
</body>
最佳答案
您可以使用以下 CSS:
body {
margin: 0;
background-color: blue;
}
#wrapper {
margin: 0 auto;
max-width: 100vh;
background-color: red;
}<div id="wrapper">Content</div>在纵向模式下，包装器将具有 100% 宽度，在横向模式下，包装器宽度将与屏幕高度相同。
为了完整起见，下面是一个与 OP 中的屏幕截图相匹配的示例:
body {
margin: 0;
background-color: blue;
}
#wrapper {
margin: 0 auto;
max-width: 100vh;
background-color: red;
}
/* landscape mode: the wrapper is full height */
@media screen and (orientation: landscape) {
#wrapper {
min-height: 100vh;
}
}
/* portrait mode: the wrapper is same height as width */
@media screen and (orientation: portrait) {
#wrapper {
min-height: 100vw;
}
}<div id="wrapper">Content</div>关于html - CSS 将内容保持为纵向或方形模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51105593/