一、需求：

页面布局分三大块：

Header

Body

Footer

1、内容不满一页时，Footer 在屏幕最底部，Body 填充满 Header 与 Footer 中间的部分。

2、当缩小浏览器时，Footer 在底部浮动，直到碰到 Body 区域中有内容的部分为止。

3、当 Body 里的内容大于一页时，以正常出现滚动条的方式。

二、方法：

1、页面填充满屏幕。

1.1、先去掉所有元素的边距。

* {

margin:;

padding:;

}

1.2、设置页面高度 100%，并设置为 overflow: hidden，即：超多的部分不显示;

#wrapper {

    overflow: hidden;

    _height: 100%;

    height: auto !important;

    min-height: 100%;

}

1.3、内容区域设置成如下：

#body {

    padding-bottom: 32767px;

    margin-bottom: -32767px;

}

内容区域当内容不满一页时，自动高度 100%完成~并且不会因此出现将内容吞掉或者页面错乱问题。

2、Footer 区域当内容不满一页时，自动浮动在页面最底部，并且收缩浏览器大小时，会随着浏览器的缩小而一直浮动在浏览器底部，直到碰到存在内容的位置时停止浮动，当Footer超出一页时，与正常 DIV 一样在页面最下面。

2.1、在 wrapper DIV里加上 position: relative;

#wrapper {

    overflow: hidden;

    _height: 100%;

    height: auto !important;

    min-height: 100%;

    position: relative;

    background-color: blanchedalmond;

}

2.2、在内容里 body 区域增加子DIV ”body-wrapper“，并设置如下：

#body-wrapper {

    padding-bottom: 100px;

}

2.3、在 Footer 区域设置相对位置。

#footer {

    width: 100%;

    height: 100px;

    background-color: #d9d9d9;

    position: absolute;

    bottom: 0px;

}

完成！

完整代码如下：

CSS：

整体：

* {

margin:;

padding:;

}

html, body {

height: 100%;

}

#wrapper {

overflow: hidden;

_height: 100%;

height: auto !important;

min-height: 100%;

position: relative;

background-color: blanchedalmond;

}

头部：

#header {

width: 990px;

height: 90px;

margin: 0px auto;

background-color: white;

}

内容：

#body {

    width: 990px;

    margin: 0 auto;

    padding-bottom: 32767px;

    margin-bottom: -32767px;

    background-color: aliceblue;

}

#body-wrapper {

    padding-bottom: 100px;

}

底部：

#footer {

width: 100%;

height: 100px;

background-color: #d9d9d9;

position: absolute;

bottom: 0px;

}

#footer-wrapper {

width: 990px;

margin: 10px auto;

color: #6e6e6e;

}

#footer-left{

float:left;

}

#footer-right{

float:right;

}

#footer a{

color: #6e6e6e;

}

页面：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta charset="utf-8" />

<title>我的 ASP.NET MVC 应用程序</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

<link href="/Content/Default/Site.css" rel="stylesheet"/>

     <link href="/Content/Default/Header.css" rel="stylesheet"/>

     <link href="/Content/Default/Body.css" rel="stylesheet"/>

     <link href="/Content/Default/Footer.css" rel="stylesheet"/>

</head>

<body>

<div id="wrapper">

<div id="header">

123456

</div>

<div id="body">

<div id="body-wrapper">

...

</div>

</div>

<div id="footer">

<div id="footer-wrapper">

<div id="footer-left">

<a href="#">关于我们</a> | <a href="#">友情链接</a> | <a href="#">免责声明</a>

</div>

<div id="footer-right">

Copyright &copy;

</div>

</div>

</div>

</div>

</body>

</html>

Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。的更多相关文章

  1. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  2. 父级div宽度100%,子级一个div宽度固定，另一个宽度自适应

    <!DOCTYPE html> <html> <head> <title>布局测试</title> <style type=" ...

  3. 两个DIV，左DIV宽度固定，右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  4. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  5. easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

    jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jqu ...

  6. ## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

    一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...

  7. 布局：上下两个div高度固定，中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  8. HTML中--定义header和footer高度中间自适应

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  9. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 自学Hadoop（一）

        主要是在自学一些根据以下两份文档来自己摸索.第二份文档是最后的时候,碰到一个问题的搜到的,因为觉得不错.所以放在这里.如果只是想要能跑起来的话,直接跟着这篇文章做.就可以.hadoop版本为2 ...

  2. [Hive - LanguageManual] Statistics in Hive

    Statistics in Hive Statistics in Hive Motivation Scope Table and Partition Statistics Column Statist ...

  3. 第二百八十五天 how can I 坚持

    今天好平凡啊. 晚上给徐斌打电话说忘带钥匙了,一块吃了个饭. 回到家,什么都不想做,好消沉. 玩了几局象棋,很多东西只是玩玩,但还是会认真,认真就会输,好惨. 最近在关注万科幸福里,可是.首付付不起啊 ...

  4. Linux之一次性安装开发工具：yum groupinstall Development tools

    [spark@sparksinglenode ~]$ yum grouplist | moreLoaded plugins: fastestmirror, refresh-packagekit, se ...

  5. Apache Spark GraphX

    GraphX基于BSP模型,在Spark之上封装类似Pregel的接口,进行大规模同步全局的图计算,尤其是当用户进行多轮迭代时,基于Spark内存计算的优势尤为明显.

  6. Delphi使用FindClass实现动态建立对像（有点像反射）

    相关资料:http://www.blogjava.net/nokiaguy/archive/2008/05/10/199739.html { http://www.blogjava.net/nokia ...

  7. 玩转轻巧型C/C++ IDE之C-Free（配置GCC、Visual C++、Borland C++编译器）

    玩转轻巧型C/C++ IDE之C-Free(配置GCC.Visual C++.Borland C++编译器) 之前在写一点简单的C/C++代码时习惯了VC++6.0,但是由于在windows7下VC6 ...

  8. IMAQ Flatten Image to String VI的参数设置对比

    无压缩 jpeg压缩 无损二元包装 仅JPEG压缩时有效 平化类型(指定字符串中存储什么类型的数据)   None JPEG PACKED BINARY Quality Image Image and ...

  9. TQ210裸机编程(4)——按键（中断法）

    S5PV210有4个向量中断控制器(VIC),每个向量中断控制器包含32个中断源. 当某个中断源产生中断时,CPU会自动的将VICxVECTADDRy(x=0,1,2,3,y=0-31)寄存器的值赋给 ...

  10. Java日期处理类

    1.Date java.util.Date 2.Calendar 日历类,通过getInstance()获取实例对象,可以获取年月日时分秒 3.SimpleDateFormat 日期格式化,forma ...