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

最新推荐文章于 2020-06-25 00:24:21 发布

weixin_34130389

最新推荐文章于 2020-06-25 00:24:21 发布

阅读量868

点赞数

文章标签：测试

原文链接：http://www.cnblogs.com/cjnmy36723/p/3484214.html

版权

一、需求：

页面布局分三大块：

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>