使 <main> 和 <nav> 的大小在屏幕尺寸之间保持一致答案

【问题标题】：Make size of <main> and <nav> consistent across screen sizes使 <main> 和 <nav> 的大小在屏幕尺寸之间保持一致
【发布时间】：2022-12-24 04:29:49
【问题描述】：

这可能是一个非常基本的问题（自称是菜鸟），但我很困惑。我有一个我正在构建的网站，其中每个页面都有一堆文本和其他元素，以及一个粘性的侧边栏导航。

为此，我使用了一个 <main> 元素，我将其格式化为网格，并在左侧为 <nav> 分配了一些空间，将其余空间分配给了正文等。但是，我正在努力弄清楚如何在屏幕尺寸之间保持定位一致。我希望整个元素的大小（<nav> 和 <main> 如果在小型笔记本电脑屏幕（例如 11"）上大致占据整个屏幕，但不一定会变大（即边距扩大？）桌面显示器。我希望保留我专用于内容的 <main> 的 ~90%居中在它所在的每一页上，nav 稍微偏离左侧的中心。

为了用 reprex 进行演示，这里是我希望它看起来大致的样子：

配备更小的笔记本电脑大小的屏幕。然而，对于更大的屏幕（例如我的 27" 桌面屏幕），它看起来像这样：

我正在尝试在 css 中使用 % margin

main {
  display: grid;
  grid-template-columns: 15em 1fr;
  max-width: 100em;
  margin: auto 10% auto auto;
}

但这显然行不通。我仍然是一个 html/css 新手，所以希望有人能帮助我解决我认为很容易解决的问题？

如果有帮助，我做了一个CODEPEN EXAMPLE？

提前致谢！！

【问题讨论】：

标签： html css

【解决方案1】：

所以事实证明有人已经想出了一个好方法来做到这一点！！ https://codepen.io/ragdoll/pen/KKXaNP 展示了如何通过近似 min-margin 来做到这一点，即使没有任何这样的东西，但它的工作原理是等效的

【讨论】：