固定div在指定位置兼容写法

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_33912445

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量75

点赞数

文章标签： xhtml

本文介绍了一种实现网页中div元素在滚动时保持位置不变的技术方案，通过使用CSS的position属性配合特定的表达式确保div层在浏览器窗口滚动时能够平滑地固定在顶部或底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无闪动的div层固定</title>
<style type="text/css">
body{margin:0px; padding:0px;}
#fixedBottom{
position:fixed; bottom:100px; 
_position:absolute; _bottom:100px;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginBottom,10)||100)));
width:100%; height:30px; line-height:30px; border:1px solid #ccc;
}
#fixedTop{
position:fixed; top:0px; 
_position:absolute; _top:100px;
_top:expression(eval(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||100)));
width:100%; height:30px; line-height:30px; border:1px solid #ccc;
}
*html{background-image:url(about:blank);background-attachment:fixed;}
</style>
</head>
<body style="height:2000px;">

<div id="fixedTop">我吃了定心丹，风吹不动，雷打不动，我就定在这愁着你！</div> 

<div id="fixedBottom">我吃了定心丹，风吹不动，雷打不动，我就定在这愁着你！</div>

</body>
</html>