主站经典论坛作品集 Think.Pages 博客维基桌面聚合

经典论坛 « WEB标准化专栏 « 给个固定在底部的层的写法

打印

[求助] 给个固定在底部的层的写法

rambus2 [楼主]

初级会员

帖子: 74
体力: 128
威望: 0
离线: 4 天

发短消息

1^# 大中小发表于 2008-5-9 09:47

今天在QQ上看到那个会固定在页面底部的flash，有人知道是怎么实现的吗？给一个，谢谢。

蓝色的牙齿

TOP

km268

盗版阿飞
版主

帖子: 5092
体力: 7582
威望: 3
当前: 云南昆明

专长 网页设计,前端制作

2^# 大中小发表于 2008-5-9 09:53

position:absolute;left:0;bottom:0;

書閱易經夢在紅樓志添三國心有水滸影看成龍人做自己
新開店鋪捧個場吧

TOP

rambus2 [楼主]

初级会员

帖子: 74
体力: 128
威望: 0
离线: 4 天

发短消息

3^# 大中小发表于 2008-5-12 10:53

拖一拖侧边条就上去了，这也算？

蓝色的牙齿

TOP

skylookout

新手上路

帖子: 30
体力: 24
威望: 0
离线: 9 天

4^# 大中小发表于 2008-5-12 11:32

要用position:fixed吧不过IE 6不支持，要用css expression模拟

i-gen.cn

TOP

thelucky

新手上路

帖子: 86
体力: 31
威望: 0
当前: 广东深圳
离线: 8 天

发短消息

5^# 大中小发表于 2008-5-12 11:38

大概思路是
<div class="top"></div>
<div class="bottom"></div>

top设置height:100%;
bottom假设height:80px;

top margin-bottom:-80px;

itroam.com

TOP

iioio

初级会员

帖子: 24
体力: 58
威望: 0
当前: 北京海淀区
离线: 3 天

发短消息

6^# 大中小发表于 2008-5-12 12:12

提示：您可以先修改部分代码再运行

TOP

rambus2 [楼主]

初级会员

帖子: 74
体力: 128
威望: 0
离线: 4 天

发短消息

7^# 大中小发表于 2008-5-14 10:09

拉下去就不在那里了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body{font-size:12px;color:#000;}
#test{width:300px; height:100px; border:1px solid #000;position:absolute;left:0;bottom:0;}
</style>
</head>
<body>
<div>看看下面</div>
<div>看看下面</div>
<div>看看下面</div>
<div>看看下面</div><div>看看下面</div><div>看看下面</div>
<div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div><div>看看下面</div>
<div id="test">是这样的不</div>
</body>
</html>

提示：您可以先修改部分代码再运行

蓝色的牙齿

TOP

‹‹ 上一主题 | 下一主题 ››