<%@ 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. atitit 英文与中文与阿拉伯文的简化解决方案.docx

    atitit 英文与中文与阿拉伯文的简化解决方案.docx 1. 英文与中文与阿拉伯文的简化意义1 2. 简化的主要方法分类2 2.1. 同音替代法(比如o2o)2 2.2. 符号法(比如英文i18n ...

  2. fir.im Weekly - iOS开发中的Git流程

    本期 fir.im Weekly 收集了微博上的热转资源,包含 Android.iOS 开发工具.源码等好用的轮子,还有一些 APP 设计的 Tips,希望对你有用. 精仿知乎日报 iOS 端 @我偏 ...

  3. Java EE开发平台随手记4——Mybatis扩展3

    接着昨天的Mybatis扩展——IDaoTemplate接口. 扩展9:批量执行 1.明确什么是批量执行 首先说明一下,这里的批量执行不是利用<foreach>标签生成一长串的sql字符串 ...

  4. DELPHI支付宝支付代码

    真实业务场景的考虑 按照支付宝或者微信支付的开发手册的说法,一个标准的客户端接入支付业务模型应该是这样的,我忽略时序图,只用文字描述: 用户登录客户端,选择商品,然后点击客户端支付. 客户端收集商品信 ...

  5. KendoUI系列：DatePicker

    1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...

  6. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  7. 《Administrator's Guide》之Managing Memory

    Automatic Memory Management 1. 如果要启动Automatic Memory Management,如何确定MEMORY_TARGET的值呢? 1> 在SQL*Plu ...

  8. Oracle Linux

    一. Oracle Linux下载地址 ftp://ftp.linux.org.uk/pub/distributions/enterprise/ 该地址包含Oracle Linux 6以上版本及RHE ...

  9. [New Portal]Windows Azure Virtual Machine (20) 关闭Azure Virtual Machine与VIP Address，Internal IP Address的关系(2)

    <Windows Azure Platform 系列文章目录> 默认情况下,通过Azure Management Portal创建的Public IP和Private IP都是随机分配的. ...

  10. Windows Azure Service Bus (3) 队列(Queue) 使用VS2013开发Service Bus Queue

    <Windows Azure Platform 系列文章目录> 在之前的Azure Service Bus中,我们已经介绍了Service Bus 队列(Queue)的基本概念. 在本章中 ...