垂直浮动div [英] Vertical floating 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:

When page content contains scroll the div perfectly attached to content:

但是，当页面不包含滚动时，浮动div和页面内容之间会有几个像素间隙:

But when page does not contains scroll there is a couple of pixels gap between floating div and page content:

我该如何解决?

我想我应该检查内容的位置或检查页面上是否有滚动，并使用jquery根据内容动态地设置div的位置?

I think i should check the position of content or check if there is a scroll on page and set position of div according with content dynamically using jquery?

此处的简单演示 http://jsfiddle.net/KEeqe/8 只需更改高度:1710px到500px-400px，您会明白我的意思

simple demo here http://jsfiddle.net/KEeqe/8 just change height:1710px to 500px - 400px and you will see what i mean

推荐答案

您不需要JavaScript.

在您的jsfiddle 中，您有一个div，该div大概包含您的页面内容和一个小的twitter按钮，您想固定在它的右侧.由于您的内容div设置为width: 80%，因此只需提供您的Twitter按钮left: 80%.由于边框和填充，它偏离了几个像素，因此请使用twitter按钮上的margin-left进行修复.在您的jsfiddle中，有2px的间隙，因此您将要应用margin-left: -2px.这是简单的非js修复程序: Tadah！

You don't need JavaScript for this.

In your jsfiddle, you have a div that presumably contains your page content and a little twitter button that you want to have fixed to the right side of it. Since your content div is set to width: 80%, just give your twitter button left: 80%. It is off by a few pixels because of borders and padding, so use margin-left on the twitter button to fix it. In your jsfiddle, there's a 2px gap, so you will want to apply margin-left: -2px. Here's the simple, non-js fix: Tadah!

如果您将固定宽度的内容div居中放置，则会遇到相同的问题.解决方法是类似的:将twitter按钮放置在中间，左边距为内容宽度的一半加上边框.因此，如果内容固定为400px宽且居中，则可以这样定位Twitter按钮:left: 50%; margin-left: 202px. 塔达！

If you had a fixed width content div that was centered, you'd run into the same problem. The solution is similar: Position the twitter button in the center with a left margin that is half the width of the content, plus the border. So, if the content is fixed at 400px wide and centered, you'd position your twitter button thusly: left: 50%; margin-left: 202px. Tadah!

这篇关于垂直浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！