此css作用为将下面div结构中的Container-fluid背景自适应屏幕，content自适应居中
1、Div结构
all
Head
Container-fluid
Content
Under
<div id="all">
<div class="head" style="height: 81px;width: 100%;min-width: 1000px;position: relative;">
<img src="/caunion/image/title.png" />
</div>
<div class="container-fluid" style="background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;" >
<div class="content" >
</div>
</div>
<div id="under" style="margin:auto auto;bottom:0px;height:28px; line-height: 28px;min-width: 1000px;width: 100%;position: fixed;">
<div style="margin:auto">
<span style="font-size:20px;color:#848484"></span>
</div>
</div>
</div>
2、三个主要问题
1） container-fluid块背景设置
background-size：cover 使图片完全铺满 在ie8显示效果有所不同
<div class="container-fluid" style="background: url(image/ac_comp_pro/backgroud.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
">
使背景图能一直铺满浏览器 81为container-fluid以上元素的高度和；此处只有head
<script>
$(document).ready(function () {
$(".container-fluid").height($(window).height()-81);
})
$(window).resize(function () {
$(".container-fluid").height($(window).height()-81);
})
</script>
2） div上下左右居中
父div一定要有position属性
子div 样式position：absolute；top：50%；left：50%；margin-top为自身高度一半；margin-left为自身宽度一半；
<div style="position: relative;">
<div style="position: absolute;top: 50%;left: 50%;height:100px;margin-top: -50px;width:200px;margin-left:-100px; ">
</div>
</div>
3） 根据内容设置min-height、min-width使样式不会被挤变形
<div class="container-fluid" style="background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;" >
3、供参考css
body{
font-family: arial;
font-size: 25px;
text-align: center;
width:100%;
height:100%;
}
#all{
width: 100%;
height: 100%;
}
.head{
height: 81px;
width: 100%;
min-width: 1000px;
position: relative;
}
.container-fluid{
background:url(/caunion/image/backgroud.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 480px;
min-width:1000px;
}
#content{
position: absolute;
top:50%;
left: 50%;
height:400px;
width: 720px;
margin-left: -360px;
margin-top: -200px;
}
.under{
height: 29px;
bottom: 0px;
width: 100%;
min-width: 1000px;
position: fixed;
margin: auto auto;
}
4、若content中有多个部件，需要添加百分比间隔
将content中的内容放到container-fluid，设置百分比高度；再将其中的内容置中。
.row为间隔作用
<div class="container-fluid" >
<div class="row" ></div>
<div class="TabContent" ></div>
<div class="login" ></div>
<div class="TabTitle" ></div>
<!-- 选项卡结束 -->
</div>
.row{
height:10%;
}
.TabTitle{
height:36%;
width: 1000px;
margin: auto;
position: relative;
}
.login{
height: 8%;
position: relative;
}
.TabContent{
height: 36%;
position: relative;
}