一、需求：

页面布局分三大块：

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. 多校5 HDU5787 K-wolf Number 数位DP

    // 多校5 HDU5787 K-wolf Number 数位DP // dp[pos][a][b][c][d][f] 当前在pos,前四个数分别是a b c d // f 用作标记,当现在枚举的数小 ...

  2. Navicat 远程连接SQL Server 2014 Express 报08001错误

    场景:Navicat 远程连接SQL Server 2014 Express 报08001错误,经查验防火墙端口1434,1433已经打开 过程:1. 一开始觉得是连接名称问题,使用IP地址或者主机名 ...

  3. RestTemplate中文乱码问题

    使用RestTemplate传输带有图片的表单时,需要对表单中的中文参数进行URL编码, eg :URLDecoder.decode(name);               // 使用默认的解码   ...

  4. cos

    Apple过于封闭,没啥朋友,这家伙应该比较高傲,曾仅和Intel,IBM and so on..一起玩过!Google过于开放,狐朋狗友,友人泛滥,殃及ecosystem,弊端已显,祸水将至.COS ...

  5. 执行原始的 SQL 查询

    The Entity Framework Code First API includes methods that enable you to pass SQL commands directly t ...

  6. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  7. CodeForces 567A Gerald is into Art

    http://codeforces.com/problemset/problem/567/A A. Lineland Mail time limit per test 3 seconds memory ...

  8. 在数据库各种状态下查询DBID的五大类十种方法汇总

    关于DBID: DBID是DataBase IDentifier的缩写,意思就是数据库的唯一标识符. 这个DBID在数据文件头和控制文件都是存在的,可以用于标示数据文件的归属. 对于不同数据库来说,D ...

  9. Usage of readonly and const

    Many new learners can not make sure the usage scenarios of readonly and const keywords. In my opinio ...

  10. 【不积跬步，无以致千里】安装roundcube 时出现 “DSN (write): NOT OK(SQLSTATE[HY000] [2002] No such file or directory)”

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...