本文转载：转载连接：
http://bbs.blueidea.com/thread-2678770-1-1.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
padding:0 !important;
padding:100px 0;
width:100%;
height:100%;
overflow:hidden;
}
body{
padding:100px 0;
padding:/**/0;
height:100%;
overflow: hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{
position: absolute!important;
position: relative;
top:100px!important;
top:0;
bottom:100px;
width:100%;
height:auto!important;
height:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
<title>自适应100％高度</title>
</head>
<body>
<div id="header">页首</div>
<div id="middle">
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
页中<br />
</div>
<div id="footer">页脚</div>
</body>
</html>
分享到：
相关推荐
精通CSS+DIV网页样式与布局 语言：中文 格式：txt 使用前请您先阅读以下条款，否则请勿使用本站提供的文件！ 1) 本站不保证所提供程序的完整性和安全性。 2) 请在使用前查毒 (这也是您使用其它网络资源所必须注意...
总的来说，虽然CSS浮动不再是现代布局的首选方法，但理解其工作原理对于维护旧代码库和全面掌握CSS布局技巧仍然至关重要。通过深入学习和实践，开发者能够更好地应对各种网页布局挑战，提高工作效率。
我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You Know About CSS Is Wrong》http://www.sitepoint.com/books/csswrong1/ 这本书是10月发行的...
本书详细介绍了CSS如何控制页面布局，包括CSS选择器的基本使用、选择器命名规则、以及盒子模型等基础概念。 在实践篇，教程涵盖了在实际开发过程中会遇到的各种技能，包括布局设计、清除浮动、导航条的制作等。作者...
- **布局**：CSS用于控制页面元素的布局，如设置图片容器的尺寸、位置和对齐方式，以及创建滑动效果。 - **过渡和动画**：CSS3的`transition`和`animation`属性可以创建平滑的图片切换效果，如淡入淡出或左右滑动...
CSS作用：美化界面，布局页面，修饰元素外观，修改元素位置等。 CSS引入方式： 1.行内样式： 我是一个块级的标签 2.内嵌样式：将CSS样式表放到head中用 ... ...此处写CSS样式 3.外联样式：将一个独立的.css...
←点这里阅读（已附带目录）这个是如果直接阅读README没有目录会看得很辛苦，建议安装Chrome插件或者clone到本地用支持TOC目录的md软件打开阅读，比如from github 本文原创，转载请标明出处目录（PC端推荐用法后面加...
在布局方面，可能采用了响应式设计，利用媒体查询(`media queries`)确保在不同设备和屏幕尺寸上都能正常显示。这种设计可以确保在手机、平板电脑和桌面电脑上都有良好的视觉效果。 为了实现滑动的交互性，可能使用...
总的来说，"小程序UI库 转载"提供了丰富的纯CSS组件，能够帮助开发者快速打造出美观且统一风格的小程序应用。通过学习和熟练运用ColorUI，不仅能够提高开发效率，还能确保小程序的用户体验达到较高水准。在实践中...
例如，使用CSS3可以实现更复杂的布局（如Flexbox和Grid布局），创建动画效果（如过渡和关键帧动画），以及添加多背景、圆角、阴影、渐变等视觉效果。在这个黑色质感的博客设计中，CSS3可能被用来打造细腻的边框效果...
此外，CSS在瀑布流布局中也扮演着重要角色。我们需要为每个区块定义基本样式，包括宽高比，以便在Masonry插件的作用下正确显示。同时，通过媒体查询（Media Queries）实现响应式设计，确保在不同设备和屏幕尺寸上都...
纯DIV+CSS布局火狐不兼容、只兼容IE浏览器火狐下的CSS没有那么多心思去调整它了。 * 说 明：此代码为免费开源代码，请尊重作者劳动成果！ * 转载、使用或修改请保留此部分!由于时间仓促、程序有个BUG在里面当所有...
CSS3用于定义基本的样式和布局，JavaScript则用于处理动态加载和计算元素的位置，确保它们能正确地堆叠起来。在这个“html5-canvas-waterfall-lake”压缩包中，很可能包含了一个使用HTML5 Canvas元素来模拟动态瀑布...
标题提到的“转载类似iPhone的加速度滑动效果的Flex容器”是一个关于如何利用Flex布局实现类似iPhone滚动时的加速度效果的技术分享。这种效果使得滚动更加流畅，增强用户的操作体验。下面将详细介绍这个知识点及其...
此外，还有三种主题样式文件（xtheme-aero.css、xtheme-gray.css、xtheme-vista.css），可供开发者根据喜好选择EXT的视觉风格。 在实际开发中，我们通常会创建一个项目目录，例如C:\example1，并在其中设置js和css...
它负责构建DOM树（文档对象模型），解析CSS生成CSSOM树，然后将两者合并成渲染树，进而布局和绘制页面。 4. **网络模块**：负责处理HTTP/HTTPS请求，与服务器进行数据交换。它管理着缓存、Cookie，以及各种网络协议...
这篇博客文章“各种微博分享按钮代码（转载）”主要介绍了如何在网站上集成这些分享功能，以便用户一键将网页内容分享到他们的微博账户。 在网页开发中，微博分享按钮的实现通常涉及HTML、CSS以及JavaScript技术。...
1. **CSS文件 (menu.css)**: 这个文件负责定义菜单的样式，包括颜色、字体、布局等。在三级菜单中，CSS通常会设定不同级别的菜单项的显示和隐藏状态，以及滑动动画效果。例如，通过CSS选择器可以控制鼠标悬停时菜单...
在CSS中，隐藏元素滚动条是一项常见的需求，特别是在设计页面布局时，可能希望保持界面的简洁性。然而，隐藏滚动条并不意味着要牺牲内容的可滚动性。在不同的浏览器中，实现这一目标的方法略有不同。以下是一些关于...