带有滚动条的溢出-y 包括宽度 - 居中关闭

【问题标题】：Overflow-y with scrollbar includes width - Centering is off带有滚动条的溢出-y 包括宽度 - 居中关闭
【发布时间】：2014-08-27 11:12:02
【问题描述】：

我有一个问题，如果你有一个固定位置的元素占用

top: 0;
left: 0;
right: 0;
bottom: 0;

overflow-y: auto;

我想知道如何排除滚动条宽度，使两个元素居中 http://plnkr.co/edit/OJM2SHQ6ytp0sVqFsFU8?p=preview

【问题讨论】：

标签： html css

【解决方案1】：

Solution Source:

似乎这对于纯 CSS 是不可能的，所以这里有一个 JavaScript (jQuery) hack：

$(function() {
  var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
  var $child = $("<div>").css({ height: 2 }).appendTo($container);
  window.SCROLLBAR_WIDTH = $container.width() - $child.width();
  $container.remove();
});

然后：

$("div.red-banner").css({
  right: SCROLLBAR_WIDTH
});

【讨论】：