原文地址:http://blog.csdn.net/duyelang/article/details/20558899

<p><!DOCTYPE html>
<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body, html {
margin: 0px;
}
#header {
background: blue;
height: 100px;
width: 100%;
position: relative; /*父div的位置设置成相对的*/
top: 0;
}
#header #h_menu {
position:absolute;
bottom:0;
background:yellow;
width:100%;
height:50px;
}
#middle {
position:absolute;
width:100%;
height:auto;
top: 100px;
bottom:50px;
}
.left {
width: 15%; /*这里是百分比或者像素值,对应下面的center就是百分比或者像素值*/
background: red;
float: left;
height:100%;
}
.right {
width: 15%; /*这里是百分比或者像素值,对应下面的center就是百分比或者像素值*/
height: 100%;
background: pink;
float: right;
}
.center {
height: 100%;
background: green;
/*两种方式均可(一)margin(二)margin-left、margin-right*/
/*(一)、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
margin: auto;
/*(二)、这里是百分比或者像素值,对应上面的left、right中的width就是百分比或者像素值*/
/*margin-left:15%;
margin-right:15%;*/
}
#footer {
background: blue;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">

<div id="h_menu">
上_底
</div>
</div>
<div id="middle">
<div class="left">
中左
</div>
<div class="right">
中右
</div>
<div class="center">
中间
</div>
</div>
<div id="footer">

</div>
</div>
</form>
</body>
</html>
</p>

随机推荐

  1. JavaScript引擎LHS查找和RHS查找

    要想真正理解Javascript脚本中每一句代码的执行过程,需要弄清楚几个基本概念:1.引擎,从头到尾负责整个 JavaScript 程序的编译及执行过程.2.编译器,引擎的好朋友之一,负责语法分析及 ...

  2. 使用Cargo实现自动化部署

    Cargo是一组帮助用户操作Web容器的工具,它能帮助用户实现自动化部署,而且它几乎支持所有的Web容器,如Tomcat.JBoss.Jetty和Glassfish.Cargo通过cargo-mave ...

  3. 从零开始打造个人专属命令行工具集——yargs完全指南

    前言 使用命令行程序对程序员来说很常见,就算是前端工程师或者开发gui的,也需要使用命令行来编译程序或者打包程序 熟练使用命令行工具能极大的提高开发效率,linux自带的命令行工具都非常的有用,但是这 ...

  4. Excel的一些常用设置

    1. Freeze表头 (1) 下拉Worksheet的Pane,让该sheet有2个工作区,将该pane下拉到某一特定的行. (2)Window->Freeze Panes.此时会将pane智 ...

  5. Centos6.4 xen编译部署

    ruiy亲测成功,现将步骤总结如下,一步步往下将可 原文链接 http://blog.csdn.net/liyakun1992421/article/details/9071061 xen 与 kvm ...

  6. bzoj 1923 [Sdoi2010]外星千足虫(高斯消元+bitset)

    1923: [Sdoi2010]外星千足虫 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 634  Solved: 397[Submit][Status ...

  7. libCurl的文件上传

    最近在需要使用curl的上传功能,使用libCurl来实现.因此,先使用curl命令操作,然后再使用libCurl实现. 基于Http协议的文件上传的标准方法是: 基于POST Form的文件上传  ...

  8. Android设计模式(十)--生成器模式

    回头看自己写的东西,大概Android当自己控制的定义,编写代码适用性比较高.但是,看看没有什么技术含量,因此,当在学习设计模式,想想有些东西是否可以改善,例如: 自己定义Dialog是Android ...

  9. es6语法

    let定义变量,特性: 1,不允许重复定义 2,不存在预解析 3,变量存在于会块级作用域 即{}内部 const : 定义常量,常量的值不能修改,若常量是对象 对象下的属性可修改. 解构赋值语法: 数 ...

  10. Shell编程基础篇-下

    1.1 条件表达式 1.1.1 文件判断 常用文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file ...