我已经绘制了一张方便的花花公子的图像，展示了我一直在尝试使用 CSS 所做的事情。理想情况下，我想仅使用 CSS 来完成此操作，但此时我可以使用 JS 解决方案。
本质上，左侧的侧边栏不会遵循居中的 1200px 标题网格。它始终是视口(viewport)的 1/3。内容区域需要碰到左侧的侧边栏，但一旦到达右侧标题容器的边缘，它就需要停止。
我尝试过计算视口(viewport)负 1200px、负 600px 以及其他一些计算，试图让该内容区域正确缩小和增长，但我不知道如何进行。
我的最后一个想法是尝试以某种方式计算图片中的 ??% 区域，这样我就可以将内容区域推过去，但我不知道如何捕获它。
这是我上次停下来的笔:https://codepen.io/WDACDavy/pen/LJrxmY
以下是随附的 HTML 和 CSS:
body,
html {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 90px;
background: #FF570c;
max-width: 1200px;
margin: 0 auto;
}
main {
position: relative;
display: flex;
flex-wrap: nowrap;
}
aside {
min-height: 100vh;
background: #dddddd;
width: 33.3333%;
}
section {
min-height: 100vh;
background: #FFFFFF;
width: 66.6666%;
max-width: 1200px;
margin: 0 auto;
}
.strange-container {
display: block;
width: 100%;
position: relative;
height: 900px;
background: #f5f5f5;
flex: none;
}<html>
<head></head>
<body>
<header></header>
<main>
<aside>
</aside>
<section>
<div class="strange-container"> </div>
</section>
</main>
</body>
</html>好的，所以接受的答案并不是 100% 我需要的。对于那些好奇或需要类似布局的人，这就是我所做的:
我采用了接受的答案的计算(这太棒了!)并将其转换为 <section> 的左填充。元素。
padding-left: calc((100vw/3 - (50vw - 600px)));
然后我给 <main> 添加了一个渐变元素为侧边栏提供背景并添加绝对定位的 <aside>对于侧边栏内容。最终结果在这里:https://codepen.io/WDACDavy/pen/KxemLm
这将一直有效，直到屏幕降至接近 1200 像素(这适合我的用例)。
最佳答案
该区域的计算应为 100vw/3 - (100vw - 1200px)/2 [侧边栏的宽度减去标题左侧的空间] 。您可以将其用作负 margin-left，然后添加等于 (100vw - 1200px)/2 [the space on标题右侧]。需要注意的是，有滚动条时，计算可能不准确。
我删除了滚动条来查看结果:
body,
html {
margin: 0;
padding: 0;
overflow:hidden;
}
header {
width: 100%;
height: 90px;
background: #FF570c;
margin: 0 auto;
max-width:1200px;
}
main {
position: relative;
display: flex;
flex-wrap: nowrap;
}
aside {
min-height: 100vh;
background: #dddddd;
width: 33.3333%;
}
section {
min-height: 100vh;
background: red;
width: 66.6666%;
margin: 0 auto;
}
.strange-container {
display: block;
margin-left:calc(-1 * (100vw/3 - (50vw - 600px)));
margin-right:calc(50vw - 600px);
position: relative;
height: 900px;
background: rgba(0,255,0,0.8);
flex: none;
}
/*We no more have space around section so we replace it by 0*/
@media all and (max-width:1200px) {
.strange-container {
margin-left:calc(-100vw/3);
margin-right:0;
}
}<header></header>
<main>
<aside>
</aside>
<section>
<div class="strange-container"> </div>
</section>
</main>关于html - 考虑容器一侧的侧边栏和内容区域的问题查找计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52315603/