html - 带有背景液体的侧边栏位于窗口边缘

Question

这个duplicate没有解决，因为我不想用JS。 CSS: Sidebar fixed width with background to edge of window

这就是我要实现的目标:

基本上所有内容都必须位于具有特定宽度的 div 内，并设置为 margin: 0 auto 居中。在这个 div 中，必须有一个白色背景的 main div 和一个蓝色背景的 sidebar。

我不想使用 javascript。纯 CSS 不可能做到这一点吗？

当前代码(不工作):https://jsfiddle.net/0p9jrnq1/1/

Answer 1

试试这个..

.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}