在前端界面布局中经常遇到一种场景：就是界面有header和footer的情况，当采用流体布局的时候经常会因为中间的内容部分的内容不足导致界面的footer浮在界面文档的底部，但是却在窗口的中部的情况，体验非常差，问题的解决经历了以下过程。
a、采用了fixed来固定footer在窗口底部，但是会产生文档内容过长导致的footer不能跟着文档底部流动，而且产生遮挡的现象，同时对于ie6的兼容不好。
b、使用文档流布局和绝对布局结合，通过js来实现，通过进行窗口的高度和文档的高度对比，确定底部footer的布局方式为流体布局还是绝对布局，但是产生的问题是当界面存在数据异步加载和刷新的时候要每一次调用一下该js固定底部的方法，以此来防止内容过少到内容过多或者逆向的转变导致的footer位置的不友好，办法复杂，调用麻烦。
1
2
3
4
5
6
7
|
function footerFix() {
if ($(window).height() > $("body").height()) {
$(".grp_footer").addClass("footerfix"); //固定底部
} else {
$(".grp_footer").removeClass("footerfix");
}
}
|
同时以上办法中还存在一个问题，就是无法获取内容部分左侧菜单的满屏高度，因为得到的还是内容部分左侧菜单的高度，不方便对改部分进行满屏显示。
基于以上使用的场景，现采用绝对布局和min-height进行问题解决，代码如下，至于ie6，如果有需求，使用js自己控制。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度最小满屏布局</title>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="container">
<div class="left">
<div class="aside"></div>
</div>
<div class="right">
审查元素在改该元素处修改最小高度为大于屏幕高度的值可以使得底部footer跟着到达文档的最底部，最终实现效果：界面当内容少的时候高度可以满屏高，footer置于界面的底部；内容高度大于屏幕的高度的时候文档自动加高，footer置于文档的底部。
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
body{
overflow-x:hidden;
}
.main{
background:red;
position:absolute;
width:100%;
min-height:100%;
top:0;
}
.header{
height:60px;
background-color:yellow;
}
.container{
}
.left{
width:20%;
background-color:blue;
float:left;
height:1px;
}
.aside{
position:absolute;
bottom:60px;
top:60px;
width:20%;
background-color:orange;
}
.right{
overflow:hidden;
min-height:200px;
background-color:#ccc;
}
.footer{
position:absolute;
width:100%;
height:60px;
bottom:0;
background-color:green;
}
|
，在线演示：http://output.jsbin.com/wonajewowi
说明：
1、在主面板采用绝对布局并甚至最小高度为满屏
2、footer为绝对定位到底部的距离为0
3、aside部分采用绝对布局，并设置相应的距离；可以设置right部分中的min-height进行内容超长的模拟。
如此便可以根据文档内容的高度进行footer的自动贴底并最小置于窗口底部。
设计思路并不复杂，只是思路在初期混淆，所以‘进化’漫长，该为项目总结，不对之处请包涵并指出。
来自为知笔记(Wiz)
时间： 2024-10-09 05:15:35
