js代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#Main {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
#ToolBar {
position: absolute;
bottom: 30px;
right: 50px;
width: 70px;
height: 50px;
text-align: center;
background: #ccc;
z-index: 2;
overflow: hidden;
}
</style>
css代码：
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#Main {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
#ToolBar {
position: absolute;
bottom: 0px;
right: 16px;
width: 100%;
height: 20px;
text-align: center;
background: #ccc;
z-index: 2;
overflow: hidden;
}
页面代码：
<body>
<div id="Main">
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
Test<p>
</div>
<div id="ToolBar">我是固定的</div>
</body>
分享到：
相关推荐
本节将详细讲解如何使用CSS控制DIV永远固定在页面底部。 首先，为了使整个页面具有适应性，我们需要对`html`和`body`元素进行一些基本设置。代码如下： ```css html, body { width: 100%; height: 100%; margin...
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
在本文中，我们学习了使用JS+CSS来实现DIV层自适应高度和宽度的技术。我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。...
在登录页面中，通常会用div来创建输入框组、登录按钮、可能的错误提示区域等各个部分，这样可以使页面结构清晰，易于管理和维护。 在这个"登陆页面案例"中，我们可以看到以下知识点： 1. **响应式布局**：一个现代...
在探讨CSS控制div在网页中的位置这一主题时，我们聚焦于两种主要的定位技术：CSS绝对定位和CSS相对定位。这两种方法在网页设计中扮演着关键角色，尤其当设计师需要精确控制元素位置时。 ### CSS绝对定位（Absolute ...
在本资料中，每个页面可能都由多个Div元素构成，这些元素通过嵌套和并列，形成页面的层次结构，从而实现动态和静态内容的排列。 在文件名称列表中，我们看到诸如“item_1739980815”等命名的文件，这些可能是每个...
同时，JS还可以配合AJAX（异步JavaScript和XML）技术，实现在不刷新整个页面的情况下更新内容，从而提供更加流畅的用户体验。 在实际项目中，"html"这个文件很可能是包含HTML代码的主文件，其中可能包含了`<div>`...
在网页设计中，CSS（层叠样式表...总之，通过CSS和JavaScript（jQuery），我们可以轻松实现各种滑动弹出的div效果，增强网页的互动性和用户体验。设计时应考虑性能和可用性，确保过渡效果平滑且不影响页面的其他功能。
div+css 固定表头和列div+css 固定表头和列
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
在网页设计领域，"div+css"是一种广泛采用的技术，用于构建页面布局和样式。Div是HTML中的一个块级元素，全称为“division”，意为分隔或划分，主要用于组织和区分网页内容。CSS（Cascading Style Sheets）则负责...
这里展示了另一种自适应布局的方式，通过浮动元素和固定宽度来分配页面空间。 最后的代码示例中，`.wrap_l`, `.wrap_m`, 和 `.wrap_r`三个类分别代表左、中、右三栏布局。`.wrap_l`和`.wrap_r`分别设置为固定宽度并...
CSS和DIV是Web前端开发中的基本工具，用于实现页面的布局和美化。通过这个实践，我们可以深入了解这两种技术的应用。 首先，**CSS**是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。它允许...
CSS的优势在于它提供了丰富的选择器和属性，使得样式可以精确地应用到页面的各个部分，同时也支持继承和层叠，便于管理和维护大量代码。 在网页设计中，DIV元素扮演着重要的角色。它是一个通用的块级元素，通常用来...
3. 分割屏幕布局：利用div和CSS，可以轻松实现左右或上下分割的屏幕布局，适用于创建响应式的多栏界面。 三、jQuery语法在CSS+div中的应用 jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果。...
在实际开发中，"jsp css+div 后台框架"可能还包括其他组件，如JavaScript库（如jQuery）、前端框架（如Bootstrap）和服务器端框架（如Spring MVC），它们共同协作，以构建出功能强大、用户体验优秀的Web应用。...
4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...
在网页设计领域，Div+CSS是一种常见的布局技术，它使得网页结构清晰，代码可维护性更强。本项目是一个使用Div+CSS构建的个人博客，非常适合学生作为期末作业提交，因为它涵盖了网页设计的基础知识，并提供了实践的...
在用户触发某个事件（如点击按钮）时，一个小窗口（可能是一个新的div或者模态对话框）会从页面某个位置滑出，同时，整个页面的背景会逐渐变暗，形成半透明的效果，以突出显示弹出的内容。 实现这个效果有多种方式...
纯CSS控制DIV背景透明效果，没有什么好解释的，代码全在文件里面，直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b，前两位为16进制透明度， 比如说值是上面用到的...