Posts Tagged ‘DIV’

纯CSS右下角DIV浮动方法

星期五, 十二月 21st, 2012 85 views

做一个右下角浮动的DIV,之前考虑用JS来取浏览器高度,然后利用float:right; margin:浏览器.hight-DIV.height来做。但根本不需要这么复杂。

代码如下:

1
2
3
4
5
6
7
8
<div style="width:100px;
            height:100px;
            background-color:#fff;
            right:0px;
            bottom:0px;
            position:fixed;"
>
          TEST DIV
</div>

但此代码只在FireFox、Chrome及IE6以上浏览器下有效,要支持IE6则需要将position改成absolute

1
2
3
4
5
6
7
8
<div style="width:100px;
            height:100px;
            background-color:#fff;
            right:0px;
            bottom:0px;
            position:absolute;"
>
          TEST DIV
</div>

这个时候所有浏览器的效果都统一了,但是有一个弊端就是不会随着滚动条滚动。
所以如果需要精确控制DIV的位置,推荐的方案还是使用JS。

BeiTown
2012.12.21