DIV固定在页面某个位置，不随鼠标滚动而滚动

最新推荐文章于 2023-03-24 15:23:32 发布

无敌的成长日记

最新推荐文章于 2023-03-24 15:23:32 发布

阅读量7.6k

点赞数

分类专栏： C# 文章标签： DIV 滚动固定

本文链接：https://blog.csdn.net/jimoshuicao/article/details/9162831

版权

这篇博客介绍了一种使用CSS实现固定头部和底部的布局方法，适用于IE浏览器。通过设置特定的CSS样式，使得`DIV`元素在页面中保持固定位置，不会随着页面的滚动而移动。内容包括如何定义`#top-bar`和`#footer`的样式，以及针对不同浏览器的兼容性处理。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0050)http://www.pmob.co.uk/temp/fixedlayoutexample5.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Fixed header and footer for IE</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
MARGIN: 0px
}
HTML {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
}
BODY {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
}
* HTML {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
* HTML BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
* HTML #outer {
HEIGHT: 99.9%; OVERFLOW: auto; voice-family: inherit
}
* HTML #contain-all {
Z-INDEX: 1; POSITION: absolute; OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100%
}
#top-bar {
Z-INDEX: 999; POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 50px; OVERFLOW: hidden; TOP: 0px; PADDING-TOP: 0px; LEFT: