Jquery 垂直浮动div

我有垂直浮动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的位置

---

这里的简单演示只需将高度从1710px更改为500px-400px，您将看到我的意思

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

我真的不知道您在这里想要实现什么，但看起来您想要将div固定到页面的左侧。如果我错了，请纠正我

如果要将其固定到左侧，请不要：

right: 446px;

使用：

编辑

我想我知道您现在想要实现什么-您希望侧边栏相对于div处于固定位置。不幸的是，

position:fixed

只能用于基于视口固定位置

为此，您可能必须使用javascript。这是我修改后使用jQuery的

另一次编辑

还有一个选项 在本例中，固定div固定在82%的左侧。因此，它将始终位于内容之外，但相对宽度将随着视口宽度的增加而增加。另一种方法是为内容设置固定宽度（例如500px），将固定div置于

左侧：520px

---

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

我真的不知道您在这里想要实现什么，但看起来您想要将div固定到页面的左侧。如果我错了，请纠正我

如果要将其固定到左侧，请不要：

right: 446px;

使用：

编辑

我想我知道您现在想要实现什么-您希望侧边栏相对于div处于固定位置。不幸的是，

position:fixed

只能用于基于视口固定位置

为此，您可能必须使用javascript。这是我修改后使用jQuery的

另一次编辑

还有一个选项 在本例中，固定div固定在82%的左侧。因此，它将始终位于内容之外，但相对宽度将随着视口宽度的增加而增加。另一种方法是为内容设置固定宽度（例如500px），将固定div置于

左侧：520px

---

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

如果绝对确定中心内容的宽度不会改变，则可以使用“左”而不是“右”，但是如果使用“水平居中”，则会再次遇到麻烦，因为您将永远无法适应不同屏幕分辨率（宽度）的要求

---

您可以将该div移动到视口的左侧，这通常是web开发人员为避免此类问题而选择的位置，或者您仍然可以将其放置在您想要的位置，但是您必须更改布局，可能需要使用绝对或相对定位。

每次垂直滚动条时，您的视口宽度都会更改“显示”和“消失”，这就是为什么不能将固定位置设置在视口右侧的原因

如果绝对确定中心内容的宽度不会改变，则可以使用“左”而不是“右”，但是如果使用“水平居中”，则会再次遇到麻烦，因为您将永远无法适应不同屏幕分辨率（宽度）的要求

---

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

以下是使用jQuery/JavaScript的一种方法。以下是一个工作示例：

HTML:

<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
    <img src="http://washingtonbus.org/twitter_vertical.png" title=""/>
</div>

#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;
}

$(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});
    });
});

jQuery/JavaScript:

<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
    <img src="http://washingtonbus.org/twitter_vertical.png" title=""/>
</div>

#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;
}

$(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的窗口大小调整建议纳入其中。

以下是使用jQuery/JavaScript的一种方法。以下是一个工作示例：

HTML:

<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
    <img src="http://washingtonbus.org/twitter_vertical.png" title=""/>
</div>

#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;
}

$(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});
    });
});

jQuery/JavaScript:

<div id="wrap">Wrap Div</div>
<div id="twitter-tab">
    <img src="http://washingtonbus.org/twitter_vertical.png" title=""/>
</div>

#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;
}

$(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的窗口大小调整建议纳入其中。

这不需要JavaScript。 在中，您有一个可能包含页面内容的div和一个小twitter按钮，您希望将其固定在右侧。由于您的content div设置为

width:80%

，只需将您的twitter按钮设置为

左：80%

。由于边框和填充，它被关闭了几个像素，所以使用twitter按钮上的

marginleft

来修复它。在JSFIDLE中，有2px的间隔，因此您需要应用

左边距：-2px

。下面是一个简单的非js修复：

如果有一个固定宽度的内容div居中，则会遇到相同的问题。解决方案类似：将twitter按钮放在中间，左边距为内容宽度的一半，加上边框。所以，如果内容是f