带有纯粹CSS的侧边栏边栏？

Question

很容易to create a simple sidebar with pure CSS：

#page-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 600px;
}

#content {
    margin-right: 200px;
}

#sidebar {
    width: 190px;
    position: fixed;
    right: 0;
    height: 100vh;
}

这个解决方案的问题是，如果窗口变大，#sidebar（红色）会粘到窗口并与#content（黄色）留下巨大的间隙：

我们如何解决这个问题，即当窗口宽度增长时，我们如何将这个差距添加到侧边栏的右侧而不是 left ？这是how we can solve this we JQuery：

#sidebar {
    width: 190px;
    position: absolute;
    right: 0;
    height: 100vh;
}

的

function updateSidebar(sidebar) {
    sidebar.css('top', $(window).scrollTop());
    sidebar.css('height', $(window).height() -
        sidebar[0].getBoundingClientRect().top);
}

updateSidebar($('#sidebar'));
$(window).on('scroll', function() {
    updateSidebar($('#sidebar'))
});

是否有可能实现相同的JavaScript，即使用纯CSS？

Answer 1

我认为你正在寻找calc()。

在您的示例中，由于#page-wrap和#sidebar具有固定的宽度，您可以通过设置

使侧边栏粘贴到页面换行的右边框

left: calc(50% + 110px);

110px是600px / 2 - 190px的结果。

[Updated fiddle]

Answer 2

有一个简单的解释。 position:Fixed元素需要通过XY轴从屏幕定位，而不是从其相对父级定位。元素位于视口右侧的零像素处。

最佳解决方案是更改为absolute，但您可能不希望出现此行为。

也许您需要研究粘性定位元素：

http://www.sitepoint.com/css-position-sticky-introduction-polyfills/