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 ...
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
3. **定位和对齐**：通过position属性，CSS可以实现绝对定位、相对定位、固定定位等，使元素在页面上精确放置。同时，可以使用float和clear属性进行浮动和清除浮动，实现灵活的布局效果。 4. **盒模型**：CSS的盒...
《精通CSS+Div》是一本深入探讨Web前端布局技术的专著，主要聚焦于使用CSS（层叠样式表）和Div元素进行网页设计与布局。根据提供的章节信息，我们主要关注1、2、8和10章的内容。下面将详细阐述这些章节涵盖的关键...
通过使用Div和CSS，开发者可以实现更精确的页面控制，使得网页设计更加灵活，易于维护，并且有助于实现响应式设计，使网页适应不同设备的屏幕尺寸。 【JS（JavaScript）】 JavaScript是一种广泛应用于客户端Web开发...
【JS+CSS+div内容图片轮播特效】是一种常见的网页动态效果，用于展示一组图片或内容，通过平滑过渡在不同图片之间切换，为用户提供视觉上的吸引力和交互性。在这个项目中，`div`作为主要的容器元素，`CSS`用于布局和...
在实际开发中，"jsp css+div 后台框架"可能还包括其他组件，如JavaScript库（如jQuery）、前端框架（如Bootstrap）和服务器端框架（如Spring MVC），它们共同协作，以构建出功能强大、用户体验优秀的Web应用。...
在CSS中，我们可以定义各种规则，如选择器（如类选择器、ID选择器、元素选择器）、盒模型（包括内容、内边距、边框和外边距）、定位（如相对定位、绝对定位和固定定位）等，以实现对网页元素的精确控制。 在“首页...
在CSS+div布局中，我们通常会为div设置特定的样式属性，如宽度、高度、颜色、边距等，使其成为页面布局的核心组成部分。 创建页面实例时，首先要规划页面结构。这通常涉及将页面划分为若干个区域，每个区域对应一个...
2. **定位**：CSS提供了静态、相对、绝对和固定定位，可以精确控制`div`在页面中的位置。例如： ```css .absolute-div { position: absolute; top: 50px; left: 100px; } ``` 3. **响应式设计**：利用媒体...
在网页开发中，CSS（Cascading Style Sheets）和DIV元素是构建现代、响应式页面布局的重要工具。JSP（JavaServer Pages）则是一种动态网页技术，它将HTML、CSS和JavaScript与Java代码结合在一起，提供了更强大的后端...
在用户触发某个事件（如点击按钮）时，一个小窗口（可能是一个新的div或者模态对话框）会从页面某个位置滑出，同时，整个页面的背景会逐渐变暗，形成半透明的效果，以突出显示弹出的内容。 实现这个效果有多种方式...
在网页设计领域，CSS（Cascading Style Sheets）与Div元素结合使用，形成了一种高效、灵活的布局方式，即CSS+Div模板技术。这种技术能够实现页面的精确控制，使得网页设计更具可维护性和扩展性。下面将详细介绍CSS+...
纯CSS控制DIV背景透明效果，没有什么好解释的，代码全在文件里面，直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b，前两位为16进制透明度， 比如说值是上面用到的...
1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一：模拟...
1. **定位（Positioning）**：CSS2.0引入了`position`属性，包括`static`、`relative`、`absolute`和`fixed`，让开发者可以精确控制元素在页面上的位置。`relative`使元素相对于其正常位置移动，`absolute`则根据...