Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。

一、需求:

页面布局分三大块:

Header

Body

Footer

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

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

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

 

二、方法:

1、页面填充满屏幕。

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

* {

margin: 0;

padding: 0;

}

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: 0;

padding: 0;

}



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)