Html 如何获得固定的侧边栏？

我使用下面的代码来构建一个固定的边栏，它应该始终是100%的高度和20%的宽度。主要部分应显示在其旁边

#侧边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
宽度：80%；
背景：蓝色；
最小高度：1200px；
}

一,
二,
三,
四,
五,
六,
七,

内容

通过修复侧边栏，您将其抛出CSS元素的常规顺序。因此，在这里将

main

设置为

80%

并不会真正产生您希望实现的

20%+80%

幻觉。相反，您的

main

在侧边栏下获得，并且宽度也只有

80%

您需要的是一个

100%

main

，左侧填充

20%

，这样就不会出现任何内容，因此您的所有内容都是可见的

#侧边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
宽度：100%；
框大小：边框框；
左：20%；
背景：蓝色；
最小高度：1200px；
}

一,
二,
三,
四,
五,
六,
七,

内容

将

左边距：20%

添加到

main

以抵消

#侧栏所覆盖的空间


*{
边际：0px；
填充：0px；
}
#边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
左缘：20%；
宽度：80%；
背景：蓝色；
最小高度：1200px；
}


一,
二,
三,
四,
五,
六,
七,

内容
在主div中添加与侧边栏一样宽的左边距


#侧边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
宽度：80%；
背景：蓝色；
最小高度：1200px；
左缘：20%；
}


一,
二,
三,
四,
五,
六,
七,

内容
您的代码很好，但是侧边栏与主要内容重叠。您可以做的是将position属性添加到主内容并调整其left属性

使用position属性和left属性尝试此代码。：）


#侧边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
宽度：80%；
背景：蓝色；
最小高度：1200px；
位置：绝对位置；
左：100px；
}


一,
二,
三,
四,
五,
六,
七,

内容

正文{
位置：相对位置；
边际：0px；
}
#边栏{
宽度：20%；
位置：固定；
背景：红色；
身高：100%；
}
主要{
宽度：80%；
框大小：边框框；
背景：#00F无重复滚动0%0%；
最小高度：1200px；
左缘：20%；
位置：绝对位置；
}


一,
二,
三,
四,
五,
六,
七,

内容