<%@ 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. 我心中的核心组件（可插拔的AOP）~第六回 消息组件~续

    回到目录 上一回写消息组件已经是很久之前的事了,这一次准备把消息组件后续的东西说一下,事实上,第一篇文章主要讲的是发消息,而这一讲最要讲的是收消息,简单的说,就是消息到了服务器之后,如何从服务器实时的 ...

  2. 说说设计模式~观察者模式(Observer)

    返回目录 观察者模式,也叫发布/订阅模式(publish/subscribe),监视器模式等.在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼 ...

  3. CentOS6.5下安装JDK

    之前一直没有完全的总结出一篇关于Linux下安装Java的过程,今天正好就整理下. 下载jdk 如果在官网下载比较慢,那么可以到我的云盘分享上,下载jdk 1.8.0的版本: 下载地址参考链接 解压缩 ...

  4. Atitit oodbms的查询，面向对象的sql查询jpa jpql hql

    Atitit oodbms的查询,面向对象的sql查询jpa jpql hql 1.1. 标准API历史1 1.2. JPA定义了独特的JPQL(Java Persistence Query Lang ...

  5. atitit.js浏览器环境下的全局异常捕获

    atitit.js浏览器环境下的全局异常捕获 window.onerror = function(errorMessage, scriptURI, lineNumber) { var s= JSON. ...

  6. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  7. Python的枚举类型

    Python的 Python的没有我们有两种用法: 创建Enum的实例 创建Enum的subclass 创建Enum的实例 from enum import Enum, unique Month = ...

  8. 快速入门系列--MVC--03控制器和IOC应用

    Asp.net MVC也接触好久了,但由于自己一直主要负责后台,尤其是数据库方面的工作对于该框架并没有一个很好的了解,尤其是蒋金楠大师的ASP.NET MVC4框架剖析一书都买了2年多了,真正认真看过 ...

  9. Topology and Geometry in OpenCascade-Face

    Topology and Geometry in OpenCascade-Face eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明O ...

  10. 《BI那点儿事》Microsoft 逻辑回归算法——预测股票的涨跌

    数据准备:一组股票历史成交数据(股票代码:601106 中国一重),起止日期:2011-01-04至今,其中变量有“开盘”.“最高”.“最低”.“收盘”.“总手”.“金额”.“涨跌”等 UPDATE ...