我一直在为我最初想象的布局而挣扎，即使我知道执行会很棘手！对于我的主要内容，我有几个div，每个div代表一个带有不同文本/图像的全视口彩色框架。在左边，目标是在主要内容的持续时间内有一个粘性的侧栏菜单(见图(。整个部分处于理想的中心位置。
目标如设计：浮动菜单上的不同颜色部分
主要问题是将两侧放置在某个最大宽度内(或者与我的网站具有相同的边距，该网站的内容最大宽度为1100px(，并正确地将右侧内容相对于侧菜单居中/隔开。
因为每个框架都会改变颜色，所以我不能有两列布局(一侧是菜单，另一侧是不断变化的内容(，也不能在侧菜单和内容主部分的通用父容器上设置最大宽度。当我试图通过在每一帧中添加一个类来处理填充时，菜单(当前向左浮动(会移动。
我的一段代码来说明：
body {
margin: 0;
}
*, ::before, ::after {
box-sizing: border-box;
}
.frame {
min-height: 100vh;
min-width: 100vw;
padding-top: 20px;
}
.bg-o {
background: orange;
}
.bg-do {
background: darkorange;
}
/* sidebar */
.side-wrapper {
min-height: 100vh;
}
.sidebar-container {
position: sticky;
top: 0px;
float: left;
margin-top: 0;
margin-left: 140px;
height: 100%;
}
.sidebar {
border-right: 2px solid white;
margin-top: 50%;
padding: 40px 20px;
}
.sidebar-title {
color: white;
font-family: 'Asul';
text-transform: uppercase;
text-align: center;
font-size: 1.2em;
}
.side-nav-links {
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
padding: 0;
}
.btn-wh-sm {
background-color: transparent;
border: 2px solid white;
width: 170px;
height: 40px;
border-radius: 20px;
padding: 8px 30px 10px 30px;
text-align: center;
}
.btn-wh-sm a {
font-size: 1.2em;
color: white;
text-decoration: none;
}<section>
<aside class="sidebar-container">
<div class="sidebar">
<h5 class="sidebar-title">les étapes</h5>
<nav id="side-nav">
<ul class="side-nav-links">
<li class="btn-wh-sm"><a href="#">brief</a></li>
<li class="btn-wh-sm"><a href="#">recherche</a>
<li class="btn-wh-sm"><a href="#">contenu</a></li>
<li class="btn-wh-sm"><a href="#">wireframes</a></li>
<li class="btn-wh-sm"><a href="#">maquettes</a></li>
<li class="btn-wh-sm"><a href="#">code</a></li>
<li class="btn-wh-sm"><a href="#">tests</a></li>
</ul>
</nav>
</div>
</aside>
<main class="side-wrapper">
<div class="frame bg-o">
<div class="side-wrapper">
<div>
<p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système de garde. Après leur diplôme, ils ont donc décider de lancer Homiz</p>
</div>
</div>
</div>
<div class="frame bg-do">
<div class="side-wrapper">
<div class="">
<p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …). Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
</div>
</div>
</div>
</main>
</section>链接到代码笔：https://codepen.io/annesovax/pen/LYmEREy
我希望我的意图足够清楚。任何帮助都将不胜感激，我还有很多东西要学，当涉及到这种布局时，我还没有找到任何可以为我指明正确方向的东西！非常感谢！
大家好，欢迎来到堆栈溢出。我所做的基本上是将你的主要内容包装在一个名为"框架"的类中，左边距为240px，并将你的侧边栏固定，并将高度设置为80vh，而不是100%，这会导致它轻微滚动。由于您给出的示例中的白线没有向右延伸到显示器的底部，所以这看起来不错。
如果你想让框架宽度更动态，那么你必须在window.onload事件中使用getClientBoundingRect((函数来设置侧边栏的宽度。
我还把你的css整理了一下。
希望这能有所帮助。
body {
margin: 0;
}
*,
::before,
::after {
box-sizing: border-box;
}
.frame {
min-height: 100vh;
padding-top: 20px;
margin-left: 250px;
}
.bg-o {
background: orange;
}
.bg-do {
background: darkorange;
}
/* sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
margin-top: 40px;
margin-bottom: 40px;
border-right: 2px solid white;
padding: 0px 30px;
height: 90vh;
}
.sidebar-title {
color: white;
font-family: 'Asul';
text-transform: uppercase;
text-align: center;
font-size: 1.2em;
}
.side-nav-links {
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
padding: 0;
}
.btn-wh-sm {
border: 2px solid white;
width: 170px;
height: 40px;
border-radius: 20px;
padding: 8px 30px 10px 30px;
text-align: center;
}
.btn-wh-sm a {
font-size: 1.2em;
color: white;
text-decoration: none;
}<div class="sidebar">
<h5 class="sidebar-title">les étapes</h5>
<nav id="side-nav">
<ul class="side-nav-links">
<li class="btn-wh-sm"><a href="#">brief</a></li>
<li class="btn-wh-sm"><a href="#">recherche</a>
<li class="btn-wh-sm"><a href="#">contenu</a></li>
<li class="btn-wh-sm"><a href="#">wireframes</a></li>
<li class="btn-wh-sm"><a href="#">maquettes</a></li>
<li class="btn-wh-sm"><a href="#">code</a></li>
<li class="btn-wh-sm"><a href="#">tests</a></li>
</ul>
</nav>
</div>
<div class="bg-o">
<div class="frame">
<p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système
de garde. Après leur diplôme, ils ont donc décider de lancer Homiz
</p>
</div>
</div>
<div class="bg-do">
<div class="frame">
<p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents
sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …).
Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
</div>
</div>您可以通过在整个部分使用flex来获得两列(side和main(。
您可以通过将"扩展"背景色放在帧的伪元素之前，将其定位为从左到右延伸到其他所有元素的下方，来获得"扩展"的背景色。
您可能希望调整填充等内容，使其完全符合您的要求，但此片段具有基本思想，而且它是响应性的(根据视口的宽度和菜单的宽度进行调整(。当菜单需要很大的视口宽度或大于视口高度时，您可能需要考虑该怎么办，但这是另一个问题。
body {
margin: 0;
}
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
}
section {
display: flex;
}
.frame {
min-height: 100vh;
padding-top: 20px;
position: relative;
overflow: none;
}
.frame::before {
content: '';
background-color: inherit;
position: absolute;
top: 0;
right: 0%;
height: 100%;
width: 100vw;
z-index: -2;
}
.bg-o {
background: orange;
}
.bg-do {
background: darkorange;
}
/* sidebar */
.side-wrapper {
min-height: 100vh;
}
.sidebar-container {
position: sticky;
top: 0px;
margin-top: 0;
margin-left: 140px;
height: 100%;
}
.sidebar {
border-right: 2px solid white;
margin-top: 50%;
padding: 40px 20px;
}
.sidebar-title {
color: white;
font-family: 'Asul';
text-transform: uppercase;
text-align: center;
font-size: 1.2em;
}
.side-nav-links {
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
padding: 0;
}
.btn-wh-sm {
background-color: transparent;
border: 2px solid white;
width: 170px;
height: 40px;
border-radius: 20px;
padding: 8px 30px 10px 30px;
text-align: center;
}
.btn-wh-sm a {
font-size: 1.2em;
color: white;
text-decoration: none;
}<section>
<aside class="sidebar-container">
<div class="sidebar">
<h5 class="sidebar-title">les étapes</h5>
<nav id="side-nav">
<ul class="side-nav-links">
<li class="btn-wh-sm"><a href="#">brief</a></li>
<li class="btn-wh-sm"><a href="#">recherche</a>
<li class="btn-wh-sm"><a href="#">contenu</a></li>
<li class="btn-wh-sm"><a href="#">wireframes</a></li>
<li class="btn-wh-sm"><a href="#">maquettes</a></li>
<li class="btn-wh-sm"><a href="#">code</a></li>
<li class="btn-wh-sm"><a href="#">tests</a></li>
</ul>
</nav>
</div>
</aside>
<main>
<div class="frame bg-o">
<p>« Lucas et Imane sont amoureux des chats. Ils en possèdent tous les deux depuis leur plus jeune âge. Lorsqu’ils étaient étudiants et qu’ils avaient besoin de rentrer le weekend, ils ont éprouvé plusieurs fois des difficultés pour trouver un système de garde. Après leur diplôme, ils ont donc décider de lancer Homiz</p>
</div>
<div class="frame bg-do">
<p>La première étape, et surtout incontournable, la recherche ! J’ai basé mes recherches sur les différents sites existants dans le domaine du « pet-sitting » en France, et quelques-uns internationaux. En termes de design et fonctionnalité, les différents sites avaient des bons points et des moins bons points. En termes de positionnement, chacun se différenciait à différents niveaux : la cible (voyageurs, retraités, …) ou les services (garde à domicile, visites à domicile, promenades de chiens …). Le site web Homiz allait se différencier au niveau de sa spécialité : la garde de chats à domicile. </p>
</div>
</main>
</section>