垂直浮动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的固定位置 relative 。遗憾的是，position: fixed只能用于根据视口修复位置。

您可能必须使用javascript。这是我已修改为使用某些jQuery的jsfiddle.net

另一个编辑

Here is an even better version that makes the transition smoother

更多选项 在这一个中，固定div固定在左边82％。所以它总是位于内容之外，但相对宽度将随着视口宽度的增加而增加。另一种方法是为内容固定宽度（例如500px）将固定div放在left: 520px

fixed to left

Answer 2

这是使用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的窗口大小调整建议。

Answer 3

您不需要JavaScript。

在your jsfiddle中，你有一个div，可能包含你的页面内容和一个你想要固定在它右侧的小按钮。由于您的内容div设置为width: 80%，因此只需提供您的Twitter按钮left: 80%即可。由于边框和填充，它会偏离几个像素，因此请使用twitter按钮上的margin-left来修复它。在你的jsfiddle中，存在2px的差距，因此你需要应用margin-left: -2px。这是简单的非js修复：Tadah!

如果你有一个固定宽度内容div居中，你会遇到同样的问题。解决方案类似：将twitter按钮置于中心，左边距为内容宽度的一半，加上边框。因此，如果内容固定为400px宽并且居中，那么您将定位您的Twitter按钮：left: 50%; margin-left: 202px。 Tadah!

Answer 4

每次垂直滚动条出现和消失时，视口宽度都会改变，这就是为什么不能将固定位置放在视口右侧的原因。

如果你绝对确定你的中心内容不会改变宽度，你可以使用left而不是右边但是如果你使用水平居中你再次遇到麻烦，因为你永远不会满足不同屏幕分辨率的要求（宽度）。

您可以将div移动到视口的左侧，这通常是Web开发人员选择的位置，以避免这些问题，或者您仍然可以将它放在您想要的位置，但是您必须更改布局并且可能使用绝对值或相对定位。