Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。
2013-12-20 16:58
861 查看
一、需求:
页面布局分三大块:
Header
Body
Footer
1、内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分。
2、当缩小浏览器时,Footer 在底部浮动,直到碰到 Body 区域中有内容的部分为止。
3、当 Body 里的内容大于一页时,以正常出现滚动条的方式。
二、方法:
1、页面填充满屏幕。
1.1、先去掉所有元素的边距。
1.2、设置页面高度 100%,并设置为 overflow: hidden,即:超多的部分不显示;
1.3、内容区域设置成如下:
内容区域当内容不满一页时,自动高度 100%完成~并且不会因此出现将内容吞掉或者页面错乱问题。
2、Footer 区域当内容不满一页时,自动浮动在页面最底部,并且收缩浏览器大小时,会随着浏览器的缩小而一直浮动在浏览器底部,直到碰到存在内容的位置时停止浮动,当Footer超出一页时,与正常 DIV 一样在页面最下面。
2.1、在 wrapper DIV里加上 position: relative;
2.2、在内容里 body 区域增加子DIV ”body-wrapper“,并设置如下:
2.3、在 Footer 区域设置相对位置。
完成!
完整代码如下:
CSS:
整体:
头部:
内容:
底部:
页面:
页面布局分三大块:
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 © </div> </div> </div> </div> </body> </html>
相关文章推荐
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- 上中下三个DIV,高度自适应(上高度固定,下固定,中间自适应)(代码来自X人)
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- 上下Div固定,中间div高度自适应(随浏览器高度变化而变化)
- (div+css)上下固定中间自适应高度网页布局的实现
- 轻松实现两栏布局:左右DIV等高、内容自适应屏幕高度
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- css中div高度自适应且固定剩余高度由另外div内容填充
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- html css div自适应屏幕宽度,高度
- 左边DIV固定宽度,右边的DIV如何自适应填满剩下的屏幕宽度
- android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)
- 网页不满屏幕高度时,footer始终显示在底部
- 淘宝双飞翼布局,两边固定中间自适应布局。中间内容先显示。
- 如何让DIV变成默认高度,如果内容过长自动加长
- FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
- div随着内容的增加高度也自适应增加
- html css div自适应屏幕宽度,高度
- 固定DIV高度 当内容超出高度时被隐藏
- Div即父容器不根据内容自适应高度的解决方法