垂直浮动div

Question

我有垂直浮动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只需更改高度:1710px到500px - 400px你会明白我的意思

Answer 1

您的div位于视口右侧的固定位置.如果删除了滚动条,则视口会变大,因此您的div将向右移动滚动条的宽度.

我真的不知道你想要在这里实现什么,但看起来你想要将div修复到页面的左侧.如果我错了,请纠正我.

如果你想将它固定在左侧,而不是:

right: 446px;

使用:

left: 0;

编辑

我想我知道你现在想要实现的目标 - 你希望侧边栏相对于div 处于固定位置.不幸的是,position: fixed只能用于根据视口修复位置.

你可能必须使用javascript.这是我修改过的jsfiddle.net以使用一些jQuery

另一个编辑

这是一个更好的版本,使过渡更顺畅

在这一个中有一个选项,固定div固定在左边,为82%.所以它总是位于内容之外,但相对宽度将随着视口宽度的增加而增加.另一种方法是使内容具有固定的宽度(例如,500px),将固定的div放在其中left: 520px

固定在左边