<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.cs" Inherits="EkaduoBackstageLeadingToEnd.DivDemo" %>

<!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 runat="server">
    <title></title>

<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>

</head>
<body>
    <form id="form1" runat="server">
    <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>

</form>
</body>
</html>

上中下三个DIV，高度自适应（上高度固定，下固定，中间自适应）（代码来自X人）的更多相关文章

  1. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. java面试必备知识点-上中下三篇写的很详细

    参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...

  3. div上中下布局中间自适应

    需求1: 头尾固定高度,中间自适应 1.上部(header)Div高度固定100px,宽度100%: 2.下部(footer)Div高度固定100px,宽度100%: 3.中部(middle)DIV高 ...

  4. css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

    一. 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部.底部和左侧固定不动,只有中间右侧超出可滚动. html: <header>我是头部position: fix ...

  5. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  6. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  7. 用frame实现最基本的上中下三层布局,中间又分左右两部分.

    用frame实现最基本的上中下三层布局,中间又分左右两部分. 用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办.而且在导航的时候非常简单.比如说,左边是导航 ...

  8. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  9. Ajax文件上传三式

    文件上传(三式) 1.urls.py文件 url(r'^upload.html$', views.upload), 2.views.py文件 import os def upload(request) ...

随机推荐

  1. lua如何调用C++函数

    第一步是定义函数.所有在Lua中被调用的C/C++函数将使用下面一类指针进行调用: typedef int (*lua_CFunction) (lua_State *L); 换句话说,函数必须要以Lu ...

  2. Atitit 常用比较复杂的图像滤镜 attilax大总结

    Atitit 常用比较复杂的图像滤镜 attilax大总结 像素画滤镜 水彩油画滤镜 素描滤镜 梦幻镜 特点是中央集焦,周围景物朦化微带光晕,使人产生如入梦境的感觉.常用于拍摄婚纱.明星照,也用于其它 ...

  3. 每天一个linux命令（10）：cat 命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...

  4. CKEditor与CKFinder整合 MVC3

    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...

  5. Sqlserver分页的问题

    好久没有用SqlServer了,今天写了一个分页,遇到了小问题,本着温故而知新的道理,再来随便写些什么吧. 语句是这样的 string sql=“select * from ( select*,(ro ...

  6. Android入门(九)文件存储与SharedPreferences存储

    原文链接:http://www.orlion.ga/578/ Android系统中主要提供了三种方式用于简单地实现数据持久化功能,即文件存储.SharedPreference存储以及数据库存储.当然, ...

  7. Request.UrlReferrer 使用

    最近有一个功能是反馈统计,然后在反馈建议里面添加是从哪个页面点击过来的,一开始打算做成&url=这种方法加在链接里面然后页面接受参数,后来知道了request.UrlReferrer 知道他可 ...

  8. HTML5移动Web开发（五）——移动设计之CSS媒介查询

    CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计. 看示例代码ch01r06_c.html <!doctype html> <htm ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  10. java类加载器-Tomcat类加载器

    在上文中,已经介绍了系统类加载器以及类加载器的相关机制,还自定制类加载器的方式.接下来就以tomcat6为例看看tomat是如何使用自定制类加载器的.(本介绍是基于tomcat6.0.41,不同版本可 ...