`

关于css层固定浏览器底部的问题

浏览器CSSXHTMLHTML 
阅读更多 
<!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>
<style type="text/css">
*{padding:0;margin:0;}
html,body{
  _height:100%; _overflow:hidden;
}
#header,#footer{
 position:fixed;
_position:absolute;
 z-index:1000;
 width:100%;
 background:#eee;
 left:0px;
}
#content{background:#ccc;_height:100%;_overflow:auto; position:relative; padding:20px; }
#header{top:0;}
#footer{bottom:0;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for(i=0;i<100;i++){
 document.write(i+"<br />");
}
</script>
</div>
<div id="footer">定位到底部的层</div>
</body>
</html>
分享到：
| linux发行版适合做服务器排名
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯css实现固定在网页底部菜单导航

    本篇文章将详细介绍如何利用纯CSS技术来创建一个始终固定在网页底部的菜单导航。 首先，我们需要了解CSS中的定位（Positioning）属性。在CSS中，`position`属性用于定义元素的定位类型。为了使菜单导航固定在底部，...

    层固定在底部的样式 层固定在底部的样式

    在探讨“层固定在底部的样式”这一主题时，我们主要关注的是如何通过CSS（层叠样式表）技术实现网页元素或层固定于浏览器窗口底部的设计。这种布局方式在现代网页设计中非常常见，尤其在导航栏、广告条、版权信息等...

    CSS+DIV固定底部的漂浮导航条（多浏览器兼容）

    本文将深入探讨如何使用CSS和DIV来实现这样一个多浏览器兼容的固定底部导航条。 首先，我们需要理解CSS中的定位属性，这在创建固定元素时至关重要。CSS中的`position`属性有四个主要值：`static`（默认值）、`...

    html5-css3仿微信底部固定响应式导航菜单代码

    在本文中，我们将深入探讨如何使用HTML5和CSS3创建一个仿微信底部固定响应式的导航菜单。这个设计模式常用于移动应用和现代网页，因为它能提供一致的用户体验，尤其是在小屏幕设备上。让我们逐步了解实现这个功能所...

    手机网站-内容层固定在底部，兼容性好

    综上所述，创建一个“内容层固定在底部”的手机网站涉及到CSS定位技术、浏览器兼容性处理、响应式设计以及用户交互优化。这不仅要求开发者具备扎实的技术基础，还需要对用户体验有深入的理解，以提供跨平台、跨设备...

    CSS+DIV布局内容不满一屏时页底始终固定在底部_无横滚条_多浏览器兼容

    4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...

    taobao购物车全选、到达指定位置，结算条悬浮于浏览器底部

    其次，到达指定位置后结算条悬浮于浏览器底部的设计，是一种常见的用户体验优化策略，被称为固定定位（Fixed Positioning）。在用户滚动页面时，结算条始终保持在屏幕的特定位置，以便用户随时可以访问。这可以通过...

    jquery固定层顶部固定层和底部固定层IE6不抖动

    综上所述，解决“jquery固定层顶部固定层和底部固定层IE6不抖动”的问题，需要深入了解IE6的特性和限制，并结合jQuery以及CSS技巧进行优化。随着现代浏览器的普及，这些问题已经逐渐减少，但了解和处理这类兼容性...

    CSS 固定网页底部

    在网页设计中，保持网页底部始终固定在浏览器窗口的最下方，无论用户滚动页面到何处，都能看到这一区域，这通常被称为“固定底部”或“固定尾部”设计。这种设计方式常见于网站的页脚（footer），因为它能确保用户在...

    css3网页底部固定导航.zip

    【CSS3网页底部固定导航】是一种常见的网页设计技术，它利用CSS3的特性来实现在用户滚动页面时，导航栏始终保持在屏幕底部的效果。这样的设计不仅增强了用户体验，还能确保用户在浏览网页时始终能轻松访问导航链接。...

    紧贴底部的页脚CSS绝对底部

    在网页设计中，一个常见的需求是让页脚始终固定在页面底部，无论页面内容多少，都能保持在视口的最下方。这就是所谓的“紧贴底部的页脚”或“CSS绝对底部”布局。这种布局方式可以提供良好的用户体验，特别是在内容...

    始终居于浏览器底部的在线客服QQ代码

    通过这个"始终居于浏览器底部的在线客服QQ代码"，开发者可以快速地为自己的网站添加这一实用功能，同时也可以作为学习和理解CSS定位、JavaScript交互的一个实例。希望这个资源能对你的项目带来帮助，同时也激发你...

    很简单的纯CSS固定漂浮层

    本案例中，我们探讨的是一个“很简单的纯CSS固定漂浮层”的实现方法，无需JavaScript或其他编程语言，仅通过CSS就能达到预期效果。 首先，我们要理解CSS中的定位属性，这是实现固定漂浮层的关键。CSS中的定位主要有...

    软件界面的底部永居浏览器的底部或超一屏内容的底部

    "软件界面的底部永居浏览器的底部或超一屏内容的底部"这个标题涉及到一个常见的界面布局策略，通常被称为“固定底部”或者“吸附式底部栏”。这种设计模式广泛应用于网页和应用程序，尤其是那些包含大量滚动内容的...

    css将div层固定显示在页面底部不随滚动条滚动

    在网页设计中，有时候我们需要创建一个或多个页面元素，比如按钮或图标，始终固定在浏览器窗口的底部，即便页面向下滚动，该元素依然保持在视窗底部。这可以用来创建返回页面顶部的按钮，提供快速导航等。要实现这样...

    兼容各浏览器 CSS回到顶部代码

    ### 兼容各浏览器的CSS回到顶部代码解析 在网页设计与开发中，为了提高用户体验，许多网站都配备了“回到顶部”按钮。本篇文章将基于提供的文件内容，深入解析一个兼容于各大主流浏览器的CSS回到顶部功能实现方法，...

    js浮动层制作在线客服float浮动层固定在浏览器左侧

    我们可以设置`position: fixed`使其相对于浏览器窗口固定，`left: 0`让其贴在屏幕左侧。 ```css #floatLayer { position: fixed; left: 0; bottom: 30px; /* 根据需要调整底部距离 */ width: 150px; /* 自定义...

    div css腾讯广点通页面右侧底部悬浮层样式代码

    在这个场景下，我们主要讨论如何使用div和css来创建一个在页面右侧底部始终可见的悬浮层。 首先，我们需要理解`div`（division）是HTML中的一个块级元素，它主要用于组织网页内容，可以设置宽高、内边距和外边距，...

Magicbox
Global site tag (gtag.js) - Google Analytics