我有垂直浮动 div：
<div id="twitter-right-vrtical" style="position: fixed; bottom: 415px; right: 446px; display: block">
<img src="/Content/themes/start/images/twitter.png" title=""/>
</div>
当页面内容包含滚动时，div 完美附加到内容：
但是当页面不包含滚动时，浮动 div 和页面内容之间会有几个像素的差距：
我该如何解决这个问题？
我想我应该检查内容的位置或检查页面上是否有滚动并使用jquery根据内容动态设置div的位置？
这里的简单演示 http://jsfiddle.net/KEeqe/8 只需将 height:1710px 更改为 500px - 400px 你就会明白我的意思
【问题讨论】：
您的 div 位于视口右侧的固定位置。如果滚动条被移除，视口会变大，因此您的 div 将向右移动滚动条的宽度。
我真的不知道您要在这里实现什么，但看起来您想将 div 修复到页面的左侧。如果我错了，请纠正我。
如果你想把它固定在左边，而不是：
right: 446px;
使用：
left: 0;
编辑
我想我知道您现在想要实现什么 - 您希望侧边栏位于相对于 div 的固定位置相对。不幸的是，position: fixed 只能用于根据视口固定位置。
您可能必须为此使用 javascript。这是你的jsfiddle.net，我已经修改为使用一些 jQuery
另一个编辑
Here is an even better version that makes the transition smoother
更多选择
在这一个中，固定的 div 固定在 82% 的左侧。所以它总是位于内容之外，但相对宽度会随着视口宽度的增加而增加。另一种方法是为内容设置固定宽度（例如 500px），将固定 div 放在left: 520px
【讨论】：
这是一种使用 jQuery/JavaScript 的方法。这是一个工作示例：http://jsfiddle.net/KEeqe/11/
HTML：
<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
<img src="http://washingtonbus.org/twitter_vertical.png" title=""/>
</div>
CSS：
#wrap{
border: 2px solid rgb(0, 0, 0);
width: 450px;
height: 2101px;
margin: 0 auto;
}
#twitter-tab{
position: fixed;
top: 0;
left: 0;
display: block;
}
jQuery / JavaScript：
$(function () {
var pos = $('#wrap').position();
var posTop = pos.top;
var posLeft = pos.left + $('#wrap').outerWidth();
$('#twitter-tab').css({'top' : posTop, 'left': posLeft});
$(window).resize(function () {
var posLeft = $('#wrap').position().left + $('#wrap').outerWidth();
$('#twitter-tab').css({'left': posLeft});
});
});
我编辑了我的解决方案，以允许在 CSS 中更改 #wrap 宽度（无需在 JavaScript 中更改），并纳入 beno 的窗口调整大小建议。
【讨论】：
在your jsfiddle 中，您有一个大概包含您的页面内容的 div 和一个您希望固定在其右侧的小 twitter 按钮。由于您的内容 div 设置为 width: 80%，因此只需将您的 Twitter 按钮设置为 left: 80%。由于边框和填充，它偏离了几个像素，因此请在 Twitter 按钮上使用margin-left 来修复它。在您的 jsfiddle 中，有 2px 的间隙，因此您需要申请 margin-left: -2px。这是简单的非 js 修复：Tadah!
如果您有一个居中的固定宽度内容 div，您也会遇到同样的问题。解决方案类似：将 twitter 按钮放置在中心，左边距为内容宽度的一半，加上边框。因此，如果内容固定为 400 像素宽并居中，您将这样定位您的推特按钮：left: 50%; margin-left: 202px。 Tadah!
【讨论】：
每次垂直滚动条出现和消失时，您的视口宽度都会发生变化，这就是您不能将固定位置定位在视口右侧的原因。
如果您绝对确定您的中心内容不会改变宽度，您可以使用左而不是右，但是如果您使用水平居中，您将再次遇到麻烦，因为您将永远无法满足不同屏幕分辨率的要求（宽度）。
您可以将该 div 移动到视口的左侧，这通常是 Web 开发人员选择的位置以避免此类问题，或者您仍然可以将其放在您想要的位置，但是您必须更改布局并可能使用绝对或相对定位。
【讨论】：