Html 添加侧栏而不更改主要内容的对齐方式

我在网站上有页眉、页脚和主要内容。目前，它们都有自动边距，并且宽度相同，因此它们都很好地集中在页面的中心

在网站的一些但不是所有页面上，我希望在主要内容旁边显示一个侧边栏。我希望主要内容仍然与页眉和页脚对齐，所有内容都保持相同的宽度，但侧边栏显示在主要内容的右侧。换句话说，其他一切都应该尽可能类似于没有侧边栏的情况。 因此，侧边栏应该是这样的：

   |HEADER |
   |CONTENT| |SB|
   |CONTENT| |SB|
   |CONTENT|
   |FOOTER |

没有侧边栏：

   |HEADER |
   |CONTENT|
   |CONTENT|
   |CONTENT|
   |FOOTER |

---

有没有一种简单的方法可以使用CSS实现这一点？

在样式表中为main division开发两个类。 无论何时需要侧边栏和主边栏，都可以使用“宽度”属性来定义主边栏和侧边栏

只要需要侧边栏，就可以在类之间切换。 请参阅下面的代码

页眉、页脚{
宽度：100%；
文本对齐：居中；
背景：#aaa；
填充：10px 0px；
}
部分{
宽度：100%；
溢出：自动；
}
分区{
浮动：左；
}
.only main，.main带侧边栏{
高度：200px；
文本对齐：居中；
}
.只有主干道{
宽度：100%；
}
.main带侧边栏{
宽度：70%；
边框：1px纯绿色；
}
/************用于侧边栏***********/
.侧边栏{
宽度：29%；
高度：200px；
边框：1px纯红；
}
.隐藏{
显示：无；
}

标题
主要
边栏
主要
边栏
页脚

提供边栏

位置

属性和以下值之一：

• 固定的
• 相对的
• 绝对的

和

z-index:1

（或更高的值）。这将使侧边栏脱离正常的“流”（除了

relative

技术）

参考资料

以整页模式查看代码段，以获得更好的视图（尽管演示响应迅速，所以它仍然可以在较小的视口中运行）。单击红色的切换按钮。更多详细信息在下面的代码段中进行了注释

片段1

//这不是必需的；这是演示用的
var toggle=document.getElementById（'sideToggle'）；
toggle.addEventListener（'click'，函数（事件）{
var sidebar=document.querySelector（'aside'）；
边栏.classList.toggle（'off'）；
}，假）
*{
边框宽度：1px；
边框样式：实心；
边框颜色：黑色；
背景：rgba（0,0,0,2）；
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
字体：400 16px/1.45 Arial；
身高：100%；
宽度：100%；
边框颜色：石灰；
}
保险商实验室{
列表样式：无；
}
标题{
边框颜色：#fff；
}
主要{
宽度：70vw；
填充物：3em 5vw；
边框：5px点蓝色；
保证金：0自动；
}
文章{
填料：1米2米；
边框颜色：三文鱼；
}
p{
边框颜色：透明；
字号：1rem；
}
a{
背景：黄色；
}
/*演示*/
#侧开关{
浮动：对；
字体：继承；
背景：红色；
颜色：白色；
光标：指针；
右边距：4em；
}
/*所需的样式前面有✎ */
#边栏{
/* ✎ 如果“粘滞”，则使用绝对或相对
||行为是不可取的。相对的
||相对于它的
||原意，绝对意志
||将自身定位于与
||最近的定位元素，所以它是
||由于您将
||需要另一个定位元素来
||定位侧边栏。请参阅参考
||更多细节。
*/
位置：固定；
/* ✎ 参见参考文献*/
z指数：1；
/* ✎ 参见参考文献*/
顶部：calc（50vh-35px）；
/* ✎ 参见参考文献*/
右：0；
宽度：20vw；
高度：自动；
最小高度：70px；
边框：红色虚线；
背景：rgba（255,255,255,2）；
}
/*演示*/
.关{
显示：无；
}

切换
H1标题
H2标题






我已经改变了一点，你可以看一下。
要将侧边栏附加到主分区，需要使截面宽度为100%，并将主分区设置在中心

在这里，我对侧边栏使用绝对定位，因此我需要将相对位置放在剖面样式的第一位


页眉、页脚{
宽度：60%；
文本对齐：居中；
背景：#aaa；
填充：10px 0px；
保证金：自动；
}
部分{
位置：相对位置；
宽度：100%；
溢出：自动；
}
分区{
浮动：左；
}
.only main，.main带侧边栏{
高度：200px；
宽度：60%；
文本对齐：居中；
左缘：20%；
边框：1px纯绿色；
}
/************用于侧边栏***********/
.侧边栏{
位置：绝对位置；
宽度：19%；
左：80%；
高度：200px；
边框：1px纯红；
}
.隐藏{
显示：无；
}

标题
主要
边栏
主要
边栏
页脚
这很好，但是当有侧边栏时，有没有办法使页眉/页脚与主页眉/页脚的大小相同？此外，理想情况下，当添加侧边栏时，Main（和其他部分）不会改变大小，这是可以做到的。您必须使用“最大宽度”属性将布局约束到所有主要内容（页眉、主内容和页脚），然后在布局外部使用侧边栏。这将有效！但是有没有办法让侧边栏“拥抱”主要内容而不是视图的右侧？我想让内容在扩展时保持相同的宽度，只是让边距增大，这样当视图太小而无法同时显示内容和侧边栏时，就会得到一个水平滚动条，侧边栏与主视图保持一致